/* Shared case collection and template picker geometry. Keep cover sizing explicit. */
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) > .sv-case-card {
 position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0; min-width:0; min-height:0; height:auto; aspect-ratio:auto; contain:none; padding:0; overflow:visible; border:1px solid var(--sv-color-border-soft); border-radius:12px; background:var(--sv-color-surface); box-shadow:none; transform:none;
}
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-media {
 position:relative; display:grid; place-items:center; width:100%; height:auto; aspect-ratio:9/10; flex:none; overflow:hidden; border-radius:11px 11px 0 0; background:var(--sv-color-surface-strong);
}
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-media > :is(img,video) { display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-placeholder { position:static; background:none; padding:0; font-size:11px; color:var(--sv-color-text-faint); }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-badge { position:absolute; top:10px; left:10px; z-index:1; padding:5px 7px; border-radius:5px; background:var(--sv-color-canvas); color:var(--sv-color-text); font-size:10px; font-weight:500; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-body { display:flex; flex-direction:column; flex:1; padding:14px; min-width:0; overflow:hidden; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-category { margin:0; font:500 11px/1.5 var(--sv-font-sans); color:var(--sv-color-text-muted); white-space:normal; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:8px 0 12px; min-height:2.6em; overflow:hidden; color:var(--sv-color-text); font:650 14px/1.3 var(--sv-font-sans); white-space:normal; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; margin-top:auto; padding-top:10px; border-top:1px solid var(--sv-color-border-soft); }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-footer > div { display:flex; align-items:center; gap:8px; min-width:0; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-footer :is(span,b) { color:var(--sv-color-text-muted); font:500 10px/1.5 var(--sv-font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-action { flex:none; min-height:28px; padding:5px 10px; border:0; border-radius:5px; background:var(--sv-color-text); color:var(--sv-color-canvas); font:500 11px/1.5 var(--sv-font-sans); white-space:nowrap; cursor:pointer; }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-action:hover { background:color-mix(in srgb,var(--sv-color-text) 85%,var(--sv-color-canvas)); }
:is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) .sv-case-card-action:focus-visible { outline:2px solid var(--sv-color-text-muted); outline-offset:3px; }
.sv-case-card-tools { position:absolute; right:10px; top:10px; z-index:2; }
.sv-case-card-tools summary { cursor:pointer; list-style:none; padding:5px 8px; border-radius:5px; background:var(--sv-color-canvas); color:var(--sv-color-text); }
.sv-case-card-tools > div { position:absolute; top:32px; right:0; width:140px; padding:5px; border:1px solid var(--sv-color-border); border-radius:8px; background:var(--sv-color-surface); box-shadow:var(--sv-shadow-card); }
.sv-case-card-tools button { display:block; width:100%; text-align:left; }
html[data-theme="light"] :is(#canvasTemplateList,#composeTemplateGrid,#creativeCases) > .sv-case-card { border-color:transparent; box-shadow:0 5px 18px #00000006; }
#canvasTemplateDialog.sv-case-picker { width:min(1040px,calc(100vw - 32px)); height:min(768px,calc(100dvh - 48px)); max-height:calc(100dvh - 32px); padding:0; overflow:hidden; }
#canvasTemplateDialog.sv-case-picker[open] { display:flex; flex-direction:column; }
#canvasTemplateDialog.sv-case-picker > header { display:flex; align-items:center; flex:0 0 auto; min-height:84px; gap:20px; margin:0; padding:14px 24px; border-bottom:1px solid var(--sv-color-border-soft); }
.sv-case-picker-heading { flex:1; }
.sv-case-picker-heading > small { font-size:10px; font-weight:650; letter-spacing:.14em; }
.sv-case-picker-heading > h2 { margin:3px 0 0; font-size:20px; line-height:1.3; font-weight:650; }
#composeTemplateModal .compose-template-head h2 { font-size:20px; font-weight:650; }
#canvasTemplateDialog .sv-case-picker-search { display:grid; gap:5px; width:min(340px,40%); margin:0; font-size:11px; line-height:1.4; color:var(--sv-color-text-muted); }
#canvasTemplateDialog .sv-case-picker-search > input { width:100%; min-height:36px; margin:0; padding:8px 12px; font-size:12px; }
#canvasTemplateDialog.sv-case-picker > nav { flex:none; display:flex; align-items:center; gap:6px; margin:0; padding:10px 24px; overflow:auto; scrollbar-width:none; border-bottom:1px solid var(--sv-color-border-soft); }
#canvasTemplateDialog.sv-case-picker > nav::-webkit-scrollbar { display:none; }
#canvasTemplateDialog.sv-case-picker > nav[hidden] { display:none; }
#canvasTemplateDialog.sv-case-picker > nav button { flex:none; border:1px solid var(--sv-color-border); border-radius:999px; }
#canvasTemplateDialog.sv-case-picker > nav button[aria-pressed="true"] { color:var(--sv-color-canvas); background:var(--sv-color-text); border-color:var(--sv-color-text); }
#canvasTemplateList { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:max-content; align-items:start; gap:16px; min-height:0; flex:1; padding:16px 24px; max-height:none; overflow:auto; isolation:isolate; }
.cc-subcategory-label { flex:none; padding-right:8px; font-size:11px; color:var(--sv-color-text-faint); }
#canvasTemplateDialog #canvasTemplateSubcategories button { border-color:transparent; padding:6px 10px; border-radius:6px; }
#canvasTemplateDialog #canvasTemplateSubcategories button[aria-pressed="true"] { background:var(--sv-color-selection-bg); color:var(--sv-color-text); }
#canvasTemplateDialog #canvasTemplateSubcategories [data-add-subcategory] { color:var(--sv-color-text-muted); }
#canvasTemplateList > .cc-template-empty { grid-column:1/-1; padding:36px 0; color:var(--sv-color-text-muted); text-align:center; }
.cc-template-category-dialog { width:min(420px,calc(100vw - 32px)); }
.cc-template-category-dialog label { display:grid; gap:8px; font-size:12px; }
.cc-template-category-dialog input { width:100%; }
.cc-template-category-dialog p { font-size:12px; color:var(--sv-color-text-muted); }
#canvasTemplateDialog.sv-case-picker > footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0; padding:16px 28px; border-top:1px solid var(--sv-color-border-soft); }
#canvasTemplateStatus { margin:0; color:var(--sv-color-text-muted); font-size:11px; }
@media(max-width:960px){#canvasTemplateList{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){#canvasTemplateList{grid-template-columns:repeat(2,minmax(0,1fr));}#canvasTemplateDialog .sv-case-picker-search{width:45%;}}
@media(max-width:480px){#canvasTemplateList{grid-template-columns:minmax(0,1fr);padding:16px;}#canvasTemplateDialog.sv-case-picker>header{flex-wrap:wrap;flex-basis:auto;height:auto;padding:18px 16px;}#canvasTemplateDialog .sv-case-picker-search{width:100%;order:3;}#canvasTemplateDialog.sv-case-picker>nav,#canvasTemplateDialog.sv-case-picker>footer{padding:12px 16px;}}
