@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* MH-USA Design Studio: shared workspace chrome, intentionally scoped to tool roots. */
[data-studio-tool] {
  --studio-ink: #23313d;
  --studio-muted: #64737b;
  --studio-paper: #eeefeb;
  --studio-surface: #fbfbf7;
  --studio-line: #d5ddda;
  --studio-teal: #2d696b;
  --studio-rust: #b66a45;
  --studio-mono: 'DM Mono', monospace;
}
[data-studio-tool] .builder-studio {
  position: relative;
  z-index: 1;
  margin: 0 0 26px;
  border: 1px solid #d1d9d6;
  border-radius: 4px;
  background: var(--studio-surface);
  box-shadow: 0 12px 32px rgba(35, 48, 54, .075);
  color: var(--studio-ink);
}
[data-studio-tool] .studio-identity {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(180px, 1fr) minmax(150px, .7fr);
  align-items: center;
  gap: 26px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--studio-line);
  background: linear-gradient(105deg, #e8efed 0%, #f4f4ee 62%, #f5eee6 100%);
}
[data-studio-tool] .studio-wordmark { display: flex; align-items: center; gap: 10px; font: 800 12px 'Manrope', sans-serif; letter-spacing: .08em; color: var(--studio-ink); white-space: nowrap; }
[data-studio-tool] .studio-wordmark b { color: var(--studio-teal); font: 500 9px var(--studio-mono); letter-spacing: .11em; }
[data-studio-tool] .studio-context { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-studio-tool] .studio-context-label, [data-studio-tool] .studio-views > span { font: 500 9px var(--studio-mono); letter-spacing: .13em; color: var(--studio-muted); }
[data-studio-tool] .studio-context h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px 'Manrope', sans-serif; letter-spacing: -.025em; margin: 0; }
[data-studio-tool] .studio-state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--studio-muted); font: 500 10px var(--studio-mono); text-align: right; }
[data-studio-tool] .studio-state-dot { width: 7px; height: 7px; border-radius: 50%; background: #559277; box-shadow: 0 0 0 4px rgba(85,146,119,.12); flex: none; }
[data-studio-tool] .studio-toolbar { min-height: 59px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--studio-line); background: #fffefa; }
[data-studio-tool] .studio-tool-group { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
[data-studio-tool] .studio-toolbar button, [data-studio-tool] .studio-views button {
  min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 2px;
  background: transparent; color: var(--studio-ink); cursor: pointer;
  font: 600 10px 'Manrope', sans-serif; transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
[data-studio-tool] .studio-toolbar button:hover:not(:disabled), [data-studio-tool] .studio-views button:hover:not(:disabled) { background: #e9efec; border-color: #c5d4cf; color: var(--studio-teal); }
[data-studio-tool] .studio-toolbar button:disabled, [data-studio-tool] .studio-views button:disabled { color: #9ba5a4; cursor: not-allowed; background: transparent; }
[data-studio-tool] .studio-tool-group[aria-label="History"] button { border-color: var(--studio-line); background: #fffefa; min-width: 54px; }
[data-studio-tool] .studio-toolbar [data-studio-action="save"] { background: var(--studio-teal); color: #fff; border-color: var(--studio-teal); }
[data-studio-tool] .studio-toolbar [data-studio-action="save"]:hover { background: #184f54; border-color: #184f54; color: #fff; }
[data-studio-tool] .studio-toolbar [data-studio-action="reset"] { color: #985039; }
[data-studio-tool] .studio-toolbar-divider { height: 28px; width: 1px; background: var(--studio-line); }
[data-studio-tool] .studio-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 190px; flex: 1 1 210px; }
[data-studio-tool] .studio-name-wrap label { color: var(--studio-muted); font: 500 9px var(--studio-mono); white-space: nowrap; }
[data-studio-tool] .studio-name-wrap input { width: 100%; max-width: 250px; height: 34px; padding: 0 10px; border: 1px solid var(--studio-line); border-radius: 2px; color: var(--studio-ink); background: #fffefa; font: 500 11px 'Manrope', sans-serif; }
[data-studio-tool] .studio-name-wrap input:focus { outline: 2px solid rgba(35,107,112,.26); border-color: var(--studio-teal); outline-offset: 1px; }
[data-studio-tool] .studio-file-actions { margin-left: auto; }
[data-studio-tool] .studio-import-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[data-studio-tool] .studio-tool-notes { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 42px; padding: 6px 16px; background: #f6f5f0; }
[data-studio-tool] .studio-tool-notes p { margin: 0; color: var(--studio-muted); font: 10px/1.5 'Manrope', sans-serif; }
[data-studio-tool] .studio-tool-notes p strong { color: var(--studio-ink); font-weight: 700; }
[data-studio-tool] .studio-views { display: flex; align-items: center; gap: 2px; flex: none; }
[data-studio-tool] .studio-views > span { margin-right: 5px; }
[data-studio-tool] .studio-views button { min-height: 27px; padding: 0 8px; border-color: #d8ddd8; font-size: 9px; }
[data-studio-tool] :is(.builder-studio button, .builder-studio a, .builder-studio input):focus-visible { outline: 3px solid #c17a50; outline-offset: 2px; }
[data-studio-tool] :is(.prb-workspace, .locker-workspace, .bt-workspace, .bf-workbench) { align-items: start; }
[data-studio-tool] :is(.prb-stage-card, .locker-preview-column, .bt-visual-panel, .bf-preview-card) { min-width: 0; }
[data-studio-tool] :is(.prb-stage, .locker-stage, .bt-stage, .bf-stage) { min-height: clamp(360px, 43vw, 570px); }
[data-studio-tool] :is(.prb-config, .locker-config, .bt-controls, .bf-controls) { align-self: stretch; }
[data-studio-tool] .prb-title { display: none; }
[data-studio-tool] .prb-intro, [data-studio-tool] .bf-intro, [data-studio-tool] .bt-intro { margin: 0 0 16px; }
[data-studio-tool] .prb-intro h2, [data-studio-tool] .bf-intro h2, [data-studio-tool] .bt-intro h2 { font-size: clamp(19px, 2vw, 25px); }
[data-studio-tool] :is(.prb-guide, .locker-guide) { margin-top: 34px; }

@media (max-width: 920px) {
  [data-studio-tool] .studio-toolbar { align-items: flex-start; }
  [data-studio-tool] .studio-file-actions { margin-left: 0; }
  [data-studio-tool] .studio-name-wrap { flex: 1 1 260px; }
  [data-studio-tool] :is(.prb-stage, .locker-stage, .bt-stage, .bf-stage) { min-height: 370px; }
}
@media (max-width: 680px) {
  [data-studio-tool] .builder-studio { margin-bottom: 16px; }
  [data-studio-tool] .studio-identity { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px; }
  [data-studio-tool] .studio-wordmark { min-width: 0; white-space: normal; line-height: 1.5; }
  [data-studio-tool] .studio-context { grid-column: 1; grid-row: auto; }
  [data-studio-tool] .studio-state { grid-column: 1; grid-row: auto; max-width: none; font-size: 11px; text-align: left; justify-content: flex-start; }
  [data-studio-tool] [data-studio-status] { min-width: 0; flex: 1; overflow-wrap: normal; word-break: normal; }
  [data-studio-tool] .studio-toolbar { gap: 7px; padding: 9px; }
  [data-studio-tool] .studio-toolbar-divider { display: none; }
  [data-studio-tool] .studio-name-wrap { order: -1; flex: 1 1 100%; }
  [data-studio-tool] .studio-name-wrap input { max-width: none; }
  [data-studio-tool] .studio-tool-group { width: 100%; }
  [data-studio-tool] .studio-file-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-studio-tool] .studio-toolbar button { min-height: 39px; border-color: var(--studio-line); background: #fffefa; }
  [data-studio-tool] .studio-toolbar [data-studio-action="save"] { background: var(--studio-teal); }
  [data-studio-tool] .studio-tool-notes { align-items: flex-start; flex-direction: column; padding: 10px 12px; }
  [data-studio-tool] .studio-views { width: 100%; flex-wrap: wrap; }
  [data-studio-tool] .studio-views button { flex: 1; }
  [data-studio-tool] :is(.prb-stage, .locker-stage, .bt-stage, .bf-stage) { min-height: 300px; }
  [data-studio-tool="box"] .bf-preview-card { order: 0; }
  [data-studio-tool="box"] .bf-controls { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-studio-tool] .builder-studio *, [data-studio-tool] .builder-studio *::before, [data-studio-tool] .builder-studio *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
[data-studio-tool] .studio-more { position: relative; }
[data-studio-tool] .studio-more summary { cursor: pointer; padding: 10px; font-size: 12px; font-weight: 600; }
[data-studio-tool] .studio-more-panel { position: absolute; top: 100%; right: 0; z-index: 20; display: grid; min-width: 160px; padding: 8px; background: white; border: 1px solid var(--studio-line); box-shadow: 0 8px 24px #15365620; }
[data-studio-tool] .studio-more-panel button { text-align: left; }
[data-studio-tool] .studio-dialog { max-width: min(540px, calc(100vw - 40px)); width: 100%; box-sizing: border-box; padding: 24px; border: 1px solid var(--studio-line); border-radius: 8px; color: var(--studio-ink); background: white; }
[data-studio-tool] .studio-dialog::backdrop { background: #15365670; }
[data-studio-tool] .studio-dialog h2 { font-size: 22px; margin: 0 0 18px; }
[data-studio-tool] .studio-dialog p { font-size: 15px; line-height: 1.65; }
[data-studio-tool] .studio-dialog :is(select, textarea) { display: block; width: 100%; margin: 12px 0; padding: 10px; border: 1px solid var(--studio-line); font-size: 14px; }
[data-studio-tool] .studio-dialog button { padding: 10px 14px; margin: 5px; border: 1px solid var(--studio-line); background: #f5f8fa; cursor: pointer; }
[data-studio-tool] [data-studio-status][data-error="true"] { color: #a23b21; }
[data-studio-tool]:fullscreen { padding: 14px; height: 100%; overflow: auto; background: var(--studio-paper, #f8f8f4); }
@media (max-width: 700px) {
  [data-studio-tool] .studio-file-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-studio-tool] .studio-more summary { min-height: 39px; padding: 10px; border: 1px solid var(--studio-line); box-sizing: border-box; background: #fffefa; }
  [data-studio-tool] .studio-more-panel { min-width: 200px; }
}