body.bingo-studio-page {
  --ink: #172522;
  --paper: #fffdf8;
  --cream: #f6f1e7;
  --rust: #b84933;
  --teal: #386b68;
  --gold: #d8a94c;
  --navy: #294b6a;
  --pale-teal: #dce9e4;
  --pale-rust: #f3ddd5;
  --rule: rgba(23, 37, 34, .2);
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
}

.bingo-studio-main * { box-sizing: border-box; }
.bingo-studio-main [hidden] { display: none !important; }
.bingo-studio-main button,
.bingo-studio-main input,
.bingo-studio-main select,
.bingo-studio-main textarea { font: inherit; }
.bingo-studio-main button { color: inherit; }
.bingo-studio-main :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.studio-shell { width: min(1220px, calc(100% - 40px)); margin: 0 auto; }
.studio-kicker { margin: 0 0 10px; color: var(--rust); font: 600 .72rem/1.3 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }

.studio-intro { padding: 42px 0 36px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.studio-intro-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 70px; align-items: end; }
.studio-intro h1 { margin: 0; font: 900 clamp(3.1rem, 6vw, 5.7rem)/.88 "Playfair Display", Georgia, serif; letter-spacing: -.045em; }
.studio-intro p:last-child { max-width: 600px; margin: 19px 0 0; color: #52615e; font-size: 1.04rem; line-height: 1.55; }
.intro-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; border: 1px solid var(--ink); box-shadow: 7px 7px 0 var(--pale-teal); }
.intro-steps li { min-height: 126px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--cream); border-right: 1px solid var(--ink); }
.intro-steps li:last-child { border-right: 0; background: var(--pale-rust); }
.intro-steps span { margin-bottom: auto; color: var(--rust); font: 600 .7rem "DM Mono", monospace; }
.intro-steps b { font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; }
.intro-steps small { margin-top: 4px; color: #52615e; line-height: 1.25; }

.workspace-nav { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
.workspace-nav-inner { min-height: 74px; display: flex; align-items: stretch; }
.workspace-nav button { min-width: 190px; padding: 0 22px; border: 0; border-right: 1px solid var(--rule); background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.workspace-nav button span { width: 25px; height: 25px; margin-right: 9px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 600 .68rem "DM Mono", monospace; }
.workspace-nav button[aria-selected="true"] { background: var(--cream); color: var(--rust); box-shadow: inset 0 -4px 0 var(--rust); }
.workspace-nav p { margin: auto 0 auto auto; color: #63706d; font-size: .78rem; }

.maker-section { padding: 72px 0 86px; background: var(--paper); }
.maker-grid { min-height: 760px; display: grid; grid-template-columns: minmax(420px, .82fr) minmax(520px, 1.18fr); gap: 28px; background: var(--paper); }
.maker-controls { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); border-right: 1px solid var(--ink); }
.maker-controls { border: 1px solid var(--rule); border-top: 4px solid #e9ae6c; }
.editor-tabs { min-height: 62px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.editor-tabs button { border: 0; border-right: 1px solid var(--rule); background: var(--paper); font-weight: 800; cursor: pointer; }
.editor-tabs button:last-child { border-right: 0; }
.editor-tabs button[aria-selected="true"] { background: var(--cream); color: var(--rust); box-shadow: inset 0 -3px 0 var(--rust); }
.editor-scroll { min-height: 0; overflow: visible; }
.editor-panel { padding: 30px; }
.panel-heading > span { color: var(--teal); font: 600 .69rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.panel-heading h2 { margin: 8px 0 8px; font: 900 2.3rem/1 "Playfair Display", Georgia, serif; letter-spacing: -.025em; }
.panel-heading p { margin: 0; color: #596763; line-height: 1.45; }

.maker-controls fieldset { margin: 27px 0; padding: 0; border: 0; }
.maker-controls legend,
.field > span { display: block; margin-bottom: 9px; font-size: .82rem; font-weight: 800; }
.mode-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode-choice legend { grid-column: 1 / -1; }
.mode-choice label { position: relative; }
.mode-choice input,
.theme-choice input { position: absolute; opacity: 0; }
.mode-choice label > span { min-height: 132px; padding: 13px; display: flex; flex-direction: column; border: 1px solid var(--rule); background: white; cursor: pointer; }
.mode-choice i { width: 35px; height: 35px; margin-bottom: 18px; display: grid; place-items: center; border: 1px solid var(--teal); color: var(--teal); font-family: "Playfair Display", Georgia, serif; font-style: normal; font-weight: 900; }
.mode-choice b,
.mode-choice small { display: block; }
.mode-choice small { margin-top: 4px; color: #65716e; line-height: 1.25; }
.mode-choice input:checked + span { border-color: var(--ink); background: var(--pale-teal); box-shadow: 4px 4px 0 var(--teal); }

.field-grid { display: grid; grid-template-columns: 1fr 120px; gap: 14px; }
.field-wide { grid-column: 1 / -1; }
.field span small { float: right; color: #6b7773; font: 500 .68rem "DM Mono", monospace; }
.field input,
.field select,
.field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--ink); border-radius: 0; background: white; color: var(--ink); }
.field textarea { min-height: 190px; resize: vertical; line-height: 1.45; }
.maker-controls .speech-input-shell[data-speech-state="ready"] .speech-input-feedback { display: none; }
.maker-controls .speech-input-button { border-radius: 0; padding: .45rem .62rem; font-size: .76rem; }
.toggle-row { margin: 20px 0 0; padding: 14px; display: flex; gap: 11px; align-items: flex-start; background: var(--cream); border-left: 4px solid var(--gold); }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--teal); }
.toggle-row b,
.toggle-row small { display: block; }
.toggle-row small { margin-top: 3px; color: #61706c; }
.custom-items { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); }
.item-tools { display: flex; gap: 13px; align-items: center; margin-top: 9px; }
.item-tools span { margin-right: auto; color: var(--teal); font: 600 .68rem "DM Mono", monospace; }
.item-tools button,
.preview-toolbar button,
.preview-foot button,
.caller-settings button { padding: 3px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--teal); font-weight: 800; cursor: pointer; }
.field-help { color: #68736f; font-size: .78rem; line-height: 1.4; }
.next-design-button { width: 100%; margin-top: 27px; padding: 15px; display: flex; justify-content: space-between; border: 1px solid var(--ink); background: var(--cream); font-weight: 800; cursor: pointer; }
.next-design-button:hover { background: var(--pale-rust); }

.theme-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.theme-choice legend { grid-column: 1 / -1; }
.theme-swatch { position: relative; }
.theme-swatch > span { min-height: 145px; padding: 12px; display: flex; flex-direction: column; border: 1px solid var(--rule); background: white; cursor: pointer; }
.theme-swatch i { height: 70px; margin: -4px -4px 12px; display: block; border: 1px solid rgba(23,37,34,.15); }
.theme-swatch b,
.theme-swatch small { display: block; }
.theme-swatch small { margin-top: 3px; color: #65716e; }
.theme-swatch input:checked + span { border-color: var(--ink); box-shadow: 4px 4px 0 var(--gold); }
.theme-paper i,
.bingo-card.theme-paper { background-color: var(--paper); background-image: linear-gradient(rgba(216,169,76,.13) 1px, transparent 1px); background-size: 100% 20px; }
.theme-celebration i,
.bingo-card.theme-celebration { background-color: #fff8ea; background-image: radial-gradient(circle at 15% 22%,#b84933 0 3px,transparent 4px),radial-gradient(circle at 82% 17%,#386b68 0 3px,transparent 4px),linear-gradient(35deg,transparent 47%,rgba(216,169,76,.7) 48% 52%,transparent 53%); background-size: 48px 48px,54px 54px,64px 64px; }
.theme-garden i,
.bingo-card.theme-garden { background-color: #eef4ec; background-image: radial-gradient(ellipse at 20% 50%,rgba(56,107,104,.24) 0 20%,transparent 21%),radial-gradient(ellipse at 70% 30%,rgba(184,73,51,.15) 0 17%,transparent 18%); background-size: 62px 40px,75px 55px; }
.theme-night i,
.bingo-card.theme-night { background-color: var(--navy); background-image: radial-gradient(circle,#fffdf8 0 1px,transparent 2px); background-size: 28px 28px; color: white; }
.design-note { margin-top: 24px; padding: 18px; display: flex; gap: 14px; align-items: center; background: var(--pale-teal); }
.design-note > span { font-size: 1.7rem; color: var(--teal); }
.design-note p { margin: 0; font-size: .86rem; line-height: 1.4; }

.editor-footer { padding: 18px 20px; background: var(--paper); border-top: 1px solid var(--rule); }
.studio-button { min-height: 49px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 0; font-weight: 800; cursor: pointer; }
.studio-button.primary { background: var(--rust); color: white; }
.studio-button.secondary { background: var(--paper); color: var(--ink); }
.studio-button:hover:not(:disabled) { box-shadow: 4px 4px 0 var(--gold); transform: translateY(-1px); }
.studio-button:disabled { opacity: .45; cursor: not-allowed; }
.editor-footer .studio-button { width: 100%; }
.form-error { margin: 0 0 12px; padding: 11px; background: #fff0ed; border-left: 4px solid var(--rust); color: #7c2f20; }

.preview-panel { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--cream); border: 1px solid var(--rule); border-top: 4px solid var(--teal); }
.preview-toolbar,
.preview-foot { min-height: 62px; padding: 13px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); }
.preview-toolbar > div { display: flex; flex-direction: column; }
.preview-toolbar span { font: 600 .72rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.preview-toolbar small { margin-top: 3px; color: #62716d; }
.preview-stage { min-height: 630px; padding: 35px; display: grid; place-items: center; background: var(--cream); }
.preview-foot { min-height: 55px; border-top: 1px solid var(--ink); border-bottom: 0; background: var(--paper); color: #63706d; font-size: .78rem; }

.bingo-card { position: relative; width: min(100%, 520px); aspect-ratio: .78; padding: 27px; overflow: hidden; border: 2px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,37,34,.17); color: var(--ink); }
.bingo-card::before { content: ""; position: absolute; inset: 0; background: rgba(255,253,248,.84); }
.bingo-card.theme-night::before { background: rgba(23,37,34,.72); }
.bingo-card > * { position: relative; }
.card-top { min-height: 82px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.card-top small { display: block; font: 600 .64rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.card-top h3 { max-width: 370px; margin: 5px 0 0; font: 900 2rem/1 "Playfair Display", Georgia, serif; }
.card-number { padding: 6px; border: 1px solid currentColor; font: 600 .63rem "DM Mono", monospace; }
.letter-row,
.card-grid { display: grid; }
.letter-row { grid-template-columns: repeat(5, 1fr); margin-bottom: 5px; font: 900 1.2rem "Playfair Display", Georgia, serif; text-align: center; }
.card-grid { border-top: 2px solid; border-left: 2px solid; }
.card-grid.grid-3 { grid-template-columns: repeat(3,1fr); }
.card-grid.grid-4 { grid-template-columns: repeat(4,1fr); }
.card-grid.grid-5 { grid-template-columns: repeat(5,1fr); }
.card-cell { aspect-ratio: 1; padding: 5px; display: grid; place-items: center; border-right: 1.5px solid; border-bottom: 1.5px solid; background: rgba(255,253,248,.76); text-align: center; font-size: clamp(.57rem,1.1vw,.82rem); font-weight: 750; line-height: 1.17; overflow-wrap: anywhere; }
.theme-night .card-cell { background: rgba(23,37,34,.69); }
.card-cell.number-cell { font: 800 clamp(1.2rem,2.7vw,1.9rem) "Playfair Display", Georgia, serif; }
.card-cell.free-cell { background: var(--rust); color: white; font-size: .68rem; letter-spacing: .06em; }
.healthy-cell { grid-template-rows: minmax(0, 1fr) auto auto; gap: 2px; padding: 4px; font-size: clamp(.43rem,.78vw,.63rem); line-height: 1.08; }
.healthy-cell img { width: 64%; height: 64%; max-width: 54px; max-height: 54px; object-fit: contain; align-self: center; }
.healthy-cell span + span { padding-top: 2px; border-top: 1px solid rgba(23,37,34,.18); font-size: .9em; }
.healthy-cell.category-coral { background: rgba(232,135,116,.2); }
.healthy-cell.category-gold { background: rgba(216,169,76,.2); }
.healthy-cell.category-aqua { background: rgba(101,183,184,.18); }
.healthy-cell.category-lavender { background: rgba(163,140,188,.18); }
.healthy-cell.category-mint { background: rgba(123,178,146,.18); }
.theme-night .healthy-cell { background: rgba(255,253,248,.9); color: var(--ink); }
.card-foot { margin-top: 11px; display: flex; justify-content: space-between; font: 600 .59rem "DM Mono", monospace; letter-spacing: .05em; }

.batch-section { padding: 78px 0; background: var(--paper); border-top: 1px solid var(--ink); }
.section-heading,
.caller-heading { margin-bottom: 36px; display: flex; justify-content: space-between; gap: 35px; align-items: flex-end; }
.section-heading h2,
.caller-heading h2 { margin: 0; font: 900 clamp(2.7rem,5vw,4.5rem)/.95 "Playfair Display", Georgia, serif; letter-spacing: -.035em; }
.section-heading p:last-child,
.caller-heading > div > p:last-child { max-width: 650px; color: #596763; line-height: 1.5; }
.batch-actions { display: flex; gap: 10px; }
.card-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.card-gallery .bingo-card { width: 100%; padding: 17px; box-shadow: 6px 7px 0 rgba(23,37,34,.14); }
.card-gallery .card-top { min-height: 55px; }
.card-gallery .card-top h3 { font-size: 1.3rem; }
.card-gallery .card-top small,
.card-gallery .card-number,
.card-gallery .card-foot { font-size: .46rem; }
.card-gallery .letter-row { font-size: .78rem; }
.card-gallery .card-cell { font-size: .46rem; }
.card-gallery .number-cell { font-size: .95rem; }
.gallery-note { margin-top: 25px; text-align: center; color: #65716e; }

.caller-section { min-height: 760px; padding: 64px 0 80px; background: var(--cream); }
.caller-settings { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.caller-settings input { accent-color: var(--teal); }
.caller-layout { display: grid; grid-template-columns: 320px 1fr; border: 1px solid var(--ink); box-shadow: 10px 12px 0 var(--pale-teal); }
.current-call { min-height: 430px; padding: 34px; display: flex; flex-direction: column; justify-content: center; background: var(--teal); color: white; }
.current-call span { font: 600 .7rem "DM Mono", monospace; letter-spacing: .13em; }
.current-call strong { margin: 14px 0; font: 900 5.1rem/1 "Playfair Display", Georgia, serif; }
.current-call.custom-call strong { font-size: clamp(2rem,3.3vw,3rem); line-height: 1.02; overflow-wrap: anywhere; }
.current-call.healthy-call { justify-content: flex-start; overflow: auto; }
.current-call.healthy-call strong { margin: 10px 0; font-size: clamp(1.45rem,2.6vw,2.2rem); line-height: 1.05; overflow-wrap: anywhere; }
.caller-concept-icon { width: 118px; height: 118px; margin-top: 22px; padding: 10px; object-fit: contain; background: var(--paper); border: 1px solid currentColor; }
.current-call p { margin: 0; line-height: 1.45; }
.caller-side { min-width: 0; background: var(--paper); }
.caller-controls { min-height: 88px; padding: 18px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--ink); }
.caller-controls p { margin-left: auto; font: 600 .72rem "DM Mono", monospace; }
.call-board { display: grid; grid-template-columns: repeat(15,1fr); }
.call-chip { min-height: 54px; padding: 5px; display: grid; place-items: center; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-weight: 800; text-align: center; }
.call-chip.called { background: var(--gold); }
.call-board.custom-board { grid-template-columns: repeat(5,1fr); }
.call-board.healthy-board { grid-template-columns: repeat(5,1fr); }
.custom-board .call-chip,
.healthy-board .call-chip { font-size: .73rem; overflow-wrap: anywhere; }
.how-to-play { margin-top: 35px; padding: 20px; display: grid; grid-template-columns: 180px 1fr; gap: 25px; background: var(--pale-rust); border-left: 5px solid var(--rust); }
.how-to-play p { margin: 0; line-height: 1.5; }
.print-cards { display: none; }

@media (max-width: 940px) {
  .studio-intro-grid { grid-template-columns: 1fr; gap: 35px; }
  .maker-section { background: var(--pale-teal); }
  .maker-grid { grid-template-columns: 1fr; }
  .maker-controls { border-right: 0; border-bottom: 1px solid var(--ink); }
  .editor-scroll { max-height: none; }
  .preview-stage { min-height: 620px; }
  .card-gallery { grid-template-columns: repeat(2,1fr); }
  .caller-layout { grid-template-columns: 1fr; }
  .current-call { min-height: 280px; }
  .call-board { grid-template-columns: repeat(10,1fr); }
}

@media (max-width: 620px) {
  .studio-shell { width: min(100% - 24px, 1220px); }
  .studio-intro { padding: 34px 0 28px; }
  .studio-intro h1 { font-size: 3.4rem; }
  .intro-steps { grid-template-columns: repeat(3, 1fr); }
  .intro-steps li { min-height: 105px; padding: 12px 10px; border-right: 1px solid var(--ink); border-bottom: 0; }
  .intro-steps li:last-child { border-right: 0; }
  .intro-steps b { font-size: 1rem; }
  .intro-steps small { font-size: .64rem; }
  .workspace-nav-inner { min-height: 58px; }
  .workspace-nav button { min-width: 0; flex: 1; padding: 0 8px; }
  .workspace-nav p { display: none; }
  .maker-section { padding: 20px 0 45px; }
  .maker-grid { min-height: 0; box-shadow: 7px 8px 0 rgba(23,37,34,.12); }
  .editor-panel { padding: 24px 18px; }
  .mode-choice,
  .theme-choice { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: 1 / -1; }
  .preview-stage { min-height: 480px; padding: 20px 12px; }
  .preview-foot { align-items: flex-start; flex-direction: column; gap: 8px; }
  .bingo-card { padding: 16px; }
  .card-top { min-height: 65px; }
  .card-top h3 { font-size: 1.4rem; }
  .card-cell { padding: 3px; font-size: .51rem; }
  .section-heading,
  .caller-heading { align-items: stretch; flex-direction: column; }
  .batch-actions { flex-direction: column; }
  .card-gallery { grid-template-columns: 1fr; }
  .caller-section { padding-top: 45px; }
  .caller-settings { align-items: flex-start; flex-direction: column; }
  .caller-controls { align-items: stretch; flex-direction: column; }
  .caller-controls p { margin-left: 0; }
  .call-board { grid-template-columns: repeat(5,1fr); }
  .call-board.custom-board { grid-template-columns: repeat(2,1fr); }
  .call-board.healthy-board { grid-template-columns: repeat(2,1fr); }
  .how-to-play { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-button { transition: none; }
  .studio-button:hover { transform: none; }
}

@media print {
  body { background: white !important; }
  .bingo-studio-main > * { display: none !important; }
  body[data-print="cards"] .print-cards { display: block !important; }
  .print-cards .bingo-card { display: block; width: 7.65in; height: 10in; aspect-ratio: auto; margin: 0 auto; padding: .35in; border: 2px solid #111; box-shadow: none; break-after: page; page-break-after: always; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-cards .bingo-card:last-child { break-after: auto; page-break-after: auto; }
  .print-cards .card-top { height: .9in; }
  .print-cards .card-top h3 { font-size: 30pt; }
  .print-cards .card-top small,
  .print-cards .card-number,
  .print-cards .card-foot { font-size: 9pt; }
  .print-cards .letter-row { font-size: 20pt; }
  .print-cards .card-grid { height: 7.55in; }
  .print-cards .card-cell { aspect-ratio: auto; font-size: 14pt; }
  .print-cards .number-cell { font-size: 25pt; }
  .print-cards .healthy-cell { padding: 5pt; font-size: 8.5pt; }
  .print-cards .healthy-cell img { width: 48%; height: 48%; max-width: none; max-height: none; }
  @page { size: letter portrait; margin: .35in; }
}