/* Dedicated Canvas page inherits the existing Deepsyq dark visual language. */
body.canvas-detail-page{background:#080e20;color:#eef3ff;min-height:100vh}
body.canvas-detail-page main{width:100%;max-width:none;margin:0;padding:26px clamp(12px,1.5vw,28px) 52px}
body.canvas-detail-page #canvasFeature{margin:12px 0 0;padding:clamp(16px,1.8vw,30px)}
body.canvas-detail-page #canvasFeature .canvas-feature-layout{grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr)}
body.canvas-detail-page #canvasFeature .canvas-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto;gap:9px}
body.canvas-detail-page #canvasFeature .canvas-example{height:auto;aspect-ratio:16/9}
body.canvas-detail-page #canvasFeature .canvas-feature-editor{grid-column:1/-1}
body.canvas-detail-page .canvas-page-footer{width:100%;max-width:none;margin:0;padding:0 clamp(12px,1.5vw,28px) 28px}
body.canvas-detail-page .canvas-page-footer a{color:#cbdcff}
@media(max-width:900px){body.canvas-detail-page main{padding:67px 18px 32px}body.canvas-detail-page #canvasFeature .canvas-feature-layout{grid-template-columns:1fr}body.canvas-detail-page #canvasFeature{padding:15px}body.canvas-detail-page .canvas-page-footer{padding-inline:18px}}
@media(max-width:640px){body.canvas-detail-page #canvasFeature .canvas-example-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto}body.canvas-detail-page #canvasFeature .canvas-example{height:auto;aspect-ratio:16/9}}
/* Canvas-only full-width layout: override shared 1240px shell without touching Home. */
body.canvas-detail-page.deepsyq-sitewide-shell #canvasPageMain,
body.canvas-detail-page.deepsyq-sitewide-shell .canvas-page-footer{
  width:100%;max-width:none;margin-inline:0;
}
@media(max-width:640px){
  body.canvas-detail-page #canvasPageMain{padding-inline:10px}
  body.canvas-detail-page .canvas-page-footer{padding-inline:10px}
}

/* Canvas-only reference ordering: readable touch/keyboard controls, no Home changes. */
body.canvas-detail-page .quick-create-previews{align-items:flex-start}
body.canvas-detail-page .quick-reference{
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;
  align-items:center;width:min(100%,340px);max-width:100%;min-height:58px;padding:7px;
}
body.canvas-detail-page .quick-reference img{width:48px;height:48px}
body.canvas-detail-page .quick-reference .quick-reference-name{
  display:block;min-width:0;max-width:none;font-size:13px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.canvas-detail-page .quick-reference-actions{display:flex;align-items:center;gap:5px}
body.canvas-detail-page .quick-create .quick-reference-actions button{
  flex:0 0 auto;margin-left:0;min-width:38px;min-height:38px;padding:6px 8px;font-size:13px;
  color:#eef3ff;border:1px solid #697c8a;border-radius:7px;background:#24364a;
}
body.canvas-detail-page .quick-reference-actions button:disabled{opacity:.42;cursor:not-allowed}
body.canvas-detail-page .quick-reference-actions button:focus-visible{
  outline:2px solid #a6cfff;outline-offset:2px;
}
@media(max-width:420px){
  body.canvas-detail-page .quick-reference{grid-template-columns:40px minmax(0,1fr) auto;gap:6px}
  body.canvas-detail-page .quick-reference img{width:40px;height:40px}
  body.canvas-detail-page .quick-create .quick-reference-actions button{min-width:36px;min-height:38px;padding:5px}
}