/* The sample controls belong to the studio, while the portfolio keeps its theme. */
body[data-sample="true"] .sample-banner{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  align-items:center;
  gap:24px;
  min-height:96px;
  padding:15px max(32px,calc((100vw - 1312px)/2));
  border-bottom:1px solid #42493a;
  background:#1b2019;
  color:#f1f0e8;
  font:13px/1.5 DM,Arial,sans-serif;
}
.sample-identity{min-width:0}
.sample-identity p{display:flex;align-items:center;gap:8px;margin:0 0 5px;color:#d6ef45;font:10px/1.4 'Courier New',monospace;letter-spacing:1px}
.sample-identity p:before{content:'';width:5px;height:5px;background:#d6ef45;flex:none}
.sample-identity strong{display:block;font-size:16px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.sample-identity>span{display:block;margin-top:3px;color:#b4bdab;font-size:11px;line-height:1.5}
.sample-themes{display:flex;align-items:center;gap:7px}
.sample-theme{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;border:1px solid #536046;color:#e0e6d9;background:#252d21;font-size:13px;line-height:1.4;white-space:nowrap}
.sample-theme:hover{background:#37422d;border-color:#a5b38b}
.sample-theme.active{color:#22251f;background:#f1f0e8;border-color:#f1f0e8}
.sample-theme-swatch{width:8px;height:8px;flex:none;background:#d6ef45;box-shadow:0 0 0 1px #10150d33}
.sample-theme[data-theme="studio"] .sample-theme-swatch{background:#ad7158}
.sample-theme[data-theme="midnight"] .sample-theme-swatch{background:#a99aff}
.sample-actions{display:flex;align-items:center;justify-content:flex-end;gap:17px}
.sample-back{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;color:#c6d0ba;white-space:nowrap}
.sample-back>span{font-size:19px;line-height:1}
.sample-back:hover{color:#d6ef45}
.sample-primary{display:flex;align-items:center;justify-content:space-between;gap:17px;min-height:46px;padding:11px 15px;border:1px solid #d6ef45;background:#d6ef45;color:#22251f;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap}
.sample-primary>span{font:22px/1 Arial,sans-serif}
.sample-primary:hover{background:#e7fa82;border-color:#e7fa82}
body[data-sample="true"] .sample-banner a:focus-visible{outline:2px solid #e8f4d5;outline-offset:4px}
body[data-sample="true"] #manage-gallery-link,
body[data-sample="true"] #manage-content-link,
body[data-sample="true"] .owner-cms-link{display:none!important;visibility:hidden!important}
@media(max-width:1100px){
  body[data-sample="true"] .sample-banner{grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;padding:17px 28px}
  .sample-identity>span{font-size:11px}
  .sample-themes{grid-column:1/-1;grid-row:2;justify-content:center}
  .sample-theme{min-width:135px}
  .sample-actions{grid-column:2;grid-row:1}
}
@media(max-width:620px){
  body[data-sample="true"] .sample-banner{padding:14px 20px;gap:12px}
  .sample-identity p{font-size:9px;letter-spacing:.8px;margin-bottom:3px}
  .sample-identity strong{font-size:14px}
  .sample-identity>span{display:none}
  .sample-actions{gap:12px}
  .sample-back{font-size:12px;gap:5px}
  .sample-primary{font-size:12px;gap:10px;padding:10px 12px;min-height:44px}
  .sample-primary>span{font-size:20px}
  .sample-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
  .sample-theme{min-width:0;padding:10px 7px;font-size:12px;gap:6px}
  .sample-theme-swatch{width:7px;height:7px}
}
@media(max-width:360px){
  body[data-sample="true"] .sample-banner{padding-left:16px;padding-right:16px;gap:10px}
  .sample-identity strong{font-size:13px}
  .sample-actions{gap:8px}
  .sample-back{font-size:11px;gap:4px}
  .sample-primary{font-size:11px;padding:10px;gap:8px}
  .sample-theme{font-size:11px;padding-left:5px;padding-right:5px}
}