/* 快印桌牌工作室：solid instruments, translucent chrome, printable artwork first. */
:root {
  --studio-ink: #282f39;
  --studio-muted: #535d6a;
  --studio-deep: #2b3747;
  --studio-paper: #f3f6f9;
  --studio-line: #d4d8dd;
  --studio-copper: #a97649;
  --ink: var(--studio-ink);
  --muted: var(--studio-muted);
  --accent: var(--studio-deep);
  --line: var(--studio-line);
  color: var(--studio-ink);
  background: #dfe2e5;
}
body {
  background: radial-gradient(ellipse at 12% 0, #e3e9f1 0, transparent 55%), linear-gradient(135deg, #e6e9ec, #dadde2 69%, #d7dbe0);
}
body::before, body::after { display: none; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
button:active:not(:disabled) { filter: brightness(.96); }
button:disabled { opacity: .48; filter: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, .excel-preview-table:focus-visible {
  outline: 3px solid #7b593d; outline-offset: 3px;
}
::selection { background: #cacfd6; color: #1f2936; }
input, textarea { caret-color: #2e3e53; }
input::placeholder, textarea::placeholder { color: #525c68; opacity: 1; }
.app-shell { width: min(1580px, 100%); padding: 16px 22px 10px; gap: 11px; }
.app-header { min-height: 48px; }
.brand-line { gap: 13px; min-width: 0; }
.home-brand { display: flex; align-items: center; gap: 11px; font-size: 24px; font-weight: 750; letter-spacing: -.025em; color: #29323e; text-shadow: none; white-space: nowrap; }
.brand-mark { flex: 0 0 auto; width: 41px; height: 41px; }
.site-badge { border: 0; background: #e3e7ec; color: #4e5763; box-shadow: none; border-radius: 5px; padding: 5px 8px; font-size: 12px; white-space: nowrap; }
.service-entry { margin-left: 5px; gap: 6px; color: #4e5864; font-size: 13px; text-decoration-thickness: 1px; }
.service-entry svg { width: 14px; height: 14px; }
.account-entry { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px;color:#384351;font-size:13px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap; }
.account-entry:hover { background:#dce0e6;border-radius:7px; }
.session-summary { color: #4e5763; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.workspace-nav {
  padding: 5px; gap: 5px; border: 0; border-radius: 14px; background: #2b3747;
  box-shadow: 0 6px 17px #29323d13; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.workspace-nav button { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 48px; border-radius: 10px; background: transparent; color: #dbdfe5; font-size: 15px; font-weight: 600; }
.workspace-nav button:hover { background: #394554; }
.workspace-nav button[aria-current=page] { color: #2b3645; background: #ebeef3; box-shadow: 0 2px 5px #19202921; }
.workspace-step { display: inline-grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid #778495; border-radius: 50%; color: #dbdfe5; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
[aria-current=page] .workspace-step { color: #fff8e4; background: #374353; border-color: #374353; }
.workspace-viewport { isolation: isolate; }
.panel { border: 0; border-radius: 16px; background: #f7f8fa; box-shadow: 0 7px 22px #313b470b; -webkit-backdrop-filter: none; backdrop-filter: none; }
.edit-workspace { grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr); gap: 13px; }
.design-specs { padding: 10px 15px; gap: 18px; background: #f2f4f7e8; box-shadow: 0 2px 7px #2a344108; border-radius: 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.segmented { border: 0; border-radius: 8px; padding: 3px; background: #e4e7ea; box-shadow: inset 0 1px 3px #2f394512; }
.segmented button { min-height: 36px; border-radius: 6px; color: #545d6a; font-size: 13px; }
.segmented button[aria-pressed=true] { color: #293544; background: #fafcfe; box-shadow: 0 2px 5px #2e384519; }
.design-specs>.segmented { width: 252px; }
.quick-dimensions { width: 218px; gap: 9px; }
.quick-dimensions label { color: #525c68; font-size: 12px; }
.quick-dimensions input { color: #2c3745; background: #f9fbfd; border: 1px solid #bfc5cd; height: 35px; border-radius: 6px; box-shadow: none; }
.dimensions-unit { color: #5a6472; }
.dimension-presets button { border-color: #cacfd6; color: #525c69; background: #f7f9fb; border-radius: 6px; }
.dimension-presets button[aria-pressed=true] { color: #2f3b4a; background: #dce0e6; border-color: #758292; }
.design-specs>.quiet-button { color: #48525e; }
.edit-preview { padding: 20px; background: #eef1f4; overflow: auto; }
.edit-preview .panel-heading { margin-bottom: 13px; align-items: flex-start; }
.edit-preview h1 { font-size: 22px; line-height: 1.4; font-weight: 650; letter-spacing: -.025em; color: #303944; }
.preview-badge { color: #545e6c; background: #e1e4e9; border: 0; box-shadow: none; border-radius: 5px; font-size: 11px; padding: 6px 8px; }
.preview-badge::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: #576577; }
.view-switch { width: 245px; padding: 3px; margin-bottom: 14px; background: #dee1e5; }
.view-switch button { min-height: 36px; font-size: 13px; }
.canvas-stage { min-height: 160px; border: 0; border-radius: 12px; background: #dfe2e5; box-shadow: inset 0 2px 5px #40485312; }
.canvas-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 #ffffff99; pointer-events: none; }
.logo-add { color: #343f4d; background: #f5f8fced; border-color: #727f91; }
.current-style-name { color: #333c47; font-size: 16px; font-weight: 650; margin: 12px 0 0; letter-spacing: .025em; }
.preview-caption { color: #596472; margin-top: 6px; font-size: 12px; }
.edit-preview .status-copy { color: #505965; font-size: 12px; line-height: 1.4; margin-top: 6px; }
.edit-controls { background: #fbfcfe; }
.tool-tabs { padding: 9px; gap: 4px; background: #e8ebee; border-bottom: 1px solid #d6dadf; }
.tool-tabs button { color: #4a535e; border-radius: 7px; min-height: 40px; font-size: 14px; font-weight: 600; }
.tool-tabs button:hover { background: #dbdfe5; }
.tool-tabs button[aria-selected=true] { color: #fff9e7; background: #323e4d; box-shadow: 0 2px 5px #2631401c; }
.tool-panel { padding: 21px; }
.tool-panel h2 { font-size: 19px; color: #303945; line-height: 1.4; margin-bottom: 7px; letter-spacing: -.02em; }
.name-limit, .status-copy, .privacy-note { color: #596371; }
.tool-panel>.name-limit { font-size: 13px; line-height: 1.65; margin: 6px 0 14px; }
.primary-button, .secondary-button, .batch-button { border-radius: 8px; font-size: 14px; min-height: 44px; }
.primary-button { background: #334051; border: 0; box-shadow: 0 3px 8px #323d4b1a; color: #eef4fb; }
.primary-button:hover { background: #283444; }
.secondary-button, .batch-button { background: #e2e6ec; color: #3a434e; border: 1px solid #c7cdd4; box-shadow: none; }
.secondary-button:hover, .batch-button:hover { background: #d7dde5; }
.quiet-button { color: #45505e; border-radius: 7px; }
.quiet-button:hover { background: #e2e6ec; }
.fields label, .name-label, .type-row label, .scene-choice, .unit { color: #545e6b; }
.fields input, .fields select, .name-input, .type-row input, .type-row select,
.scene-choice select, .excel-sheet-label select, .excel-mapping select, .roster-panel textarea {
  color: #2e3743; background: #f9fbfe; border-color: #bdc3cb; border-radius: 7px; box-shadow: inset 0 1px 2px #434c5707;
}
.name-input { min-height: 56px; font-size: 26px; font-weight: 600; letter-spacing: .04em; }
.check-row, .help, .brand-control, .logo-controls { color: #586270; }
.check-row input, .brand-control input { accent-color: #37475b; }
.switch { background: #c1c7cf; }
.switch:checked { background: #48576b; }
.type-row { margin: 17px 0 9px; padding-top: 13px; border-top: 1px solid #dce0e5; }
.type-row:first-child { margin-top: 9px; }
.type-row>span { color: #3b4654; font-weight: 650; }
.type-row input, .type-row select { font-size: 14px; }
.size-presets { margin-top: 9px; }
.size-presets button { border-radius: 6px; border-color: #c7cdd5; background: #edf0f4; color: #4c5560; }
.size-presets button[aria-pressed=true] { color: #364354; background: #d7dee7; border-color: #717e90; }
.font-license-info { color: #586270; padding: 12px 0; border-top: 1px solid #dce0e5; border-bottom: 1px solid #dce0e5; }
.font-license-info a { color: #3a4757; }
.type-color-controls { margin: 12px 0 18px; padding: 14px 0; border-top: 1px solid #d8dce2; border-bottom: 1px solid #d8dce2; }
.type-color-controls h3, .type-color-controls label { font-size: 13px; font-weight: 600; color: #424c59; }
.color-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #424c59; font-size: 13px; font-weight: 600; }
.color-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 7px 0 12px; }
.color-swatch { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; width: auto; height: auto; min-width: 0; min-height: 35px; padding: 5px 4px; border: 1px solid #cbd1d9; border-radius: 6px; color: #4d5661; background: #ebeef3; box-shadow: none; font-size: 11px; white-space: nowrap; }
.color-swatch i { display: block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #5b667455; }
.color-swatch i.automatic-color { background: linear-gradient(135deg, #384250 0 50%, #dae5f3 50% 100%); }
.color-swatch[aria-pressed=true] { color: #35404f; background: #d5dce5; border-color: #717e90; font-weight: 600; }
.color-swatch:hover { background: #dce2ea; box-shadow: none; }
.color-swatch:focus-visible { outline: 3px solid #7b593d; outline-offset: 2px; }
.custom-color { display: flex; align-items: center; gap: 12px; color: #535d6a; font-size: 13px; }
.custom-color label { display: inline-flex; align-items: center; gap: 8px; }
.custom-color input[type=color] { width: 40px; min-height: 34px; padding: 3px; border: 1px solid #b6bdc7; border-radius: 5px; background: #f7fafd; cursor: pointer; }
.custom-color input[type=text] { min-width: 0; width: 95px; height: 35px; border: 1px solid #bdc3cb; border-radius: 5px; padding: 5px 7px; background: #f7fafd; font-size: 13px; font-variant-numeric: tabular-nums; }
.color-status { font-size: 12px; color: #5a6472; line-height: 1.55; margin: 7px 0; }
.color-status.low-contrast { color: #80552f; background: #f6ead2; padding: 8px 10px; border-radius: 6px; }
.color-reset { min-height: 35px; padding: 5px 0; border: 0; background: transparent; color: #3d4a5a; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.background-import { padding: 0 0 14px; margin-bottom: 14px; border-bottom-color: #d4dae1; }
.background-import>.secondary-button { background: #e9edf2; border-style: dashed; border-color: #a5aeb9; color: #46505e; }
.background-import .name-limit { font-size: 12px; line-height: 1.6; margin-bottom: 0; }
.scene-choices { gap: 6px; margin: 13px 0; }
.scene-choices button { background: #ebeef2; color: #525c68; border-color: #ccd2da; border-radius: 6px; font-size: 12px; min-height: 36px; box-shadow: none; }
.scene-choices button:hover { background: #dee3ea; }
.scene-choices button[aria-pressed=true] { color: #edf3fb; background: #3d4958; border-color: #3d4958; box-shadow: none; }
.scene-choices button[data-scene-choice=designer] { min-height: 40px; font-size: 13px; }
#tool-background>.scene-choice { gap: 13px; color: #4f5864; }
#tool-background>.scene-choice select { border-color: #b9c0ca; background: #f8fafd; color: #353f4d; }
.background-cycle { border-top: 0; }
.background-cycle span { color: #5e6978; }
.template-grid { gap: 13px; margin-top: 12px; }
.template-button { position: relative; display: block; padding: 8px 8px 9px; border: 0; border-radius: 9px; color: #3d4754; background: #e9ecf0; box-shadow: none; text-align: left; }
.template-button canvas { width: 100%; border-radius: 3px; margin: 0 0 9px; box-shadow: 0 4px 9px #3b424b24; transform: none; transition: none; }
.template-button>span { display: block; margin: 0 3px; font-size: 13px; font-weight: 650; line-height: 1.5; }
.template-button small { color: #58626f; margin: 4px 3px 1px; font-size: 11px; line-height: 1.55; }
.template-button:hover { background: #dce1e8; }
.template-button:hover canvas { transform: none; }
.template-button[aria-pressed=true] { color: #2b3645; background: #d8dee6; outline: 2px solid #55606f; outline-offset: -2px; box-shadow: none; }
.template-button[aria-pressed=true]::after { content: ""; position: absolute; top: 13px; right: 13px; width: 16px; height: 16px; background: #354355; border-radius: 50%; box-shadow: 0 1px 3px #232d3b33; }
.template-button[aria-pressed=true]::before { content: ""; position: absolute; top: 17px; right: 18px; z-index: 1; width: 5px; height: 8px; border: solid #fff9e7; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.help { padding-top: 7px; }
.help summary { font-weight: 500; }
.size-summary { background: #e8ecf1; color: #4c5765; border: 0; border-radius: 9px; box-shadow: none; }
.error { color: #74442f; background: #f9e9d7; border-color: #dfbf99; }
.roster-workspace { padding: 24px; background: #f6f8fa; }
.roster-workspace h1, .print-preview h1 { font-size: 22px; line-height: 1.4; font-weight: 650; color: #323b46; letter-spacing: -.025em; }
.roster-tabs { width: 350px; max-width: 100%; padding: 4px; background: #e3e7ed; border: 0; border-radius: 9px; }
.roster-tabs button { font-size: 13px; min-height: 39px; }
#roster-input { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; height: auto; padding: 8px 0 20px; }
.excel-import { padding: 0; background: none; border: 0; box-shadow: none; }
.excel-import h2, .paste-roster h2 { font-size: 19px; line-height: 1.4; color: #39424d; }
.excel-import .name-limit, .paste-roster .name-limit { font-size: 13px; }
.excel-file-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.excel-file-name { color: #444f5e; }
.excel-sheet-label, .excel-mapping label { color: #545d6a; }
.paste-roster { margin: 0; padding: 0 0 0 30px; border-top: 0; border-left: 1px solid #d6dbe2; }
.batch-copy { color: #535d6a; font-size: 14px; }
.roster-panel textarea { height: 265px; font-size: 15px; line-height: 1.9; padding: 14px; border-radius: 8px; background: #eff2f5; }
.roster-feedback { border-top-color: #d6dbe2; font-size: 12px; }
.excel-preview-table { border-color: #c5ccd6; border-radius: 7px; box-shadow: none; }
.excel-preview-table th { background: #dee4eb; color: #404b59; }
.excel-preview-table td { color: #48515d; border-bottom-color: #dee2e7; }
.person-list { gap: 10px; }
.person-chip { color: #394350; background: #ebeef3; border-color: #cbd2da; border-radius: 8px; }
.person-chip:hover { background: #dfe5ec; }
.person-chip[aria-pressed=true] { color: #2c3644; background: #d7dee7; border-color: #778597; }
.empty-state { color: #47515f; background: #e9edf2; border-radius: 12px; padding: 48px 24px; }
.print-workspace { gap: 13px; grid-template-columns: minmax(0, 1.4fr) minmax(325px, .85fr); }
.print-preview { background: #eef1f4; padding: 20px; }
.sheet-wrap { background: #d8dce1; border-radius: 11px; box-shadow: inset 0 2px 5px #353e4a12; padding: 16px; }
#sheetCanvas { box-shadow: 0 9px 23px #353c4626; }
.page-nav { color: #586270; font-variant-numeric: tabular-nums; }
.print-controls { padding: 25px; background: #2e3947; color: #e3eaf2; }
.print-controls h2 { font-size: 21px; color: #e2eaf5; }
.print-controls h3 { color: #d4dde8; }
.print-controls .name-limit, .print-controls .privacy-note { color: #c3cad4; }
.print-controls .quiet-button { color: #c5ced9; }
.print-controls .quiet-button:hover { background: #424d5b; }
.print-controls .primary-button { background: #d1dbe8; color: #333c47; box-shadow: 0 3px 8px #161e2826; }
.print-controls .primary-button:hover { background: #d7e4f5; }
.print-controls .secondary-button { color: #d0dae6; background: #434d5b; border-color: #717e90; }
.print-controls .secondary-button:hover { background: #505a68; }
.print-controls .instruction-card { color: #c0c9d4; background: none; border: 0; border-top: 1px solid #677382; border-radius: 0; padding: 19px 0 0; box-shadow: none; line-height: 1.7; font-size: 13px; }
.print-controls .instruction-card li { padding-left: 3px; margin: 10px 0; }
.print-controls .error { color: #603d26; background: #f0dfb6; border-color: #d5b67c; }
.copy-settings { margin: 13px 0; padding: 0 0 10px; border-bottom: 1px solid #677382; }
.copy-settings>summary { min-height: 44px; padding: 10px 0; color: #d0dae6; cursor: pointer; font-size: 14px; }
.copy-presets { display: flex; gap: 8px; margin: 8px 0 13px; }
.copy-presets button { flex: 1; min-height: 44px; border: 1px solid #717e90; border-radius: 7px; color: #d0dae6; background: #434d5b; }
.copy-presets button[aria-pressed=true] { background: #d1dbe8; border-color: #d1dbe8; color: #333c47; font-weight: 650; }
.copy-number { display: flex; align-items: center; gap: 8px; color: #d0dae6; font-size: 13px; flex-wrap: wrap; }
.copy-number input { width: 74px; min-height: 44px; padding: 8px; border: 1px solid #9ba6b5; border-radius: 7px; background: #f9fbfe; color: #333c47; font-size: 16px; font-variant-numeric: tabular-nums; }
.copy-number input[aria-invalid=true] { border-color: #e5b57a; }
.copy-settings .name-limit { margin: 10px 0 0; font-size: 12px; line-height: 1.6; }
.last-pdf { margin: 18px 0; padding: 15px 0; border-top: 1px solid #677382; border-bottom: 1px solid #677382; }
.last-pdf h3 { margin: 0 0 8px; font-size: 15px; }
.last-pdf button { width: 100%; min-height: 44px; }
.generation-dialog { width: min(520px,calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 28px; border: 1px solid #bbc2ca; border-radius: 18px; color: #2b3440; background: #f2f5f8; box-shadow: 0 22px 80px #16202e50; overflow: auto; overscroll-behavior: contain; }
.generation-dialog::backdrop { background: #1a263580; backdrop-filter: blur(4px); }
.generation-dialog form { margin: 0; }
.generation-dialog h2 { margin: 0 0 13px; font-size: 24px; color: #2b3644; }
.generation-dialog p { font-size: 14px; line-height: 1.7; margin: 12px 0; }
.generation-dialog .eyebrow { margin-top: 0; font-size: 12px; }
.generation-facts { display: grid; gap: 9px; padding: 18px; background: #e5e8ec; border-radius: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.generation-facts strong { font-size: 19px; }
.generation-facts span { font-size: 14px; }
.generation-dialog .generation-free { font-weight: 700; color: #394555; }
.generation-dialog .generation-usage { font-size: 12px; color: #545d6a; }
.generation-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 19px; }
.generation-actions button { min-height: 46px; font-size: 15px; width: 100%; margin: 0; }
.generation-actions button:focus-visible { outline: 3px solid #9b783a; outline-offset: 3px; }
.generation-upload { display: flex; align-items: flex-start; gap: 9px; min-height: 44px; padding: 10px 0; font-size: 13px; line-height: 1.6; cursor: pointer; }
.generation-upload input { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0; accent-color: #394555; }
.generation-account-actions { display: grid; gap: 6px; }
.generation-account-actions a, .generation-account-actions button { display: flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; font-size: 13px; }
#resumeGeneration { width: 100%; min-height: 44px; margin-top: 10px; }
@media(max-width:360px),(max-height:650px) { .generation-dialog { padding: 17px; } .generation-dialog h2 { font-size: 21px; margin-bottom: 9px; } .generation-dialog p { font-size: 13px; margin: 9px 0; line-height: 1.55; } .generation-facts { padding: 12px; gap: 5px; } .generation-facts strong { font-size: 17px; } .generation-actions { margin-top: 12px; gap: 8px; } }
.workspace-footer { padding: 5px 8px; min-height: 49px; border: 0; background: #f3f5f8c9; border-radius: 12px; box-shadow: 0 2px 8px #39424e08; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.workspace-footer>.quiet-button { color: #4e5a6a; }
.workspace-footer>.primary-button { max-width: 165px; }
.session-note { color: #586371; font-size: 12px; }
/* Screen-reader labels inside long tools belong to that scroll surface.
   Otherwise their absolute static positions use the outer workspace and can
   enlarge document.scrollHeight beyond the fixed desktop shell. */
.tool-viewport, .roster-viewport { position: relative; }
.tool-viewport, .roster-viewport, .screen-scroll { scrollbar-color: #a1abb7 transparent; scrollbar-width: thin; }

@media (max-width: 1100px) {
  .app-shell { padding: 13px 15px 9px; gap: 9px; }
  .edit-workspace { grid-template-columns: minmax(0, 1.12fr) minmax(340px, 1fr); gap: 11px; }
  .design-specs { gap: 14px; padding: 10px 12px; }
  .design-specs>.segmented { width: 232px; }
  .quick-dimensions { width: 206px; }
  .edit-preview, .print-preview { padding: 16px; }
  .edit-preview h1, .roster-workspace h1, .print-preview h1 { font-size: 20px; }
  .preview-badge { display: none; }
  .tool-panel { padding: 18px; }
  .print-controls { padding: 21px; }
}
@media (min-width: 741px) and (max-width: 900px) {
  .home-brand { font-size: 22px; }
  .site-badge { display: none; }
  .session-summary { max-width: 285px; font-size: 12px; }
  .edit-workspace { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
  .design-specs { gap: 9px; }
  .design-specs>.segmented { width: 212px; }
  .quick-dimensions { width: 182px; }
  .edit-preview { padding: 13px; }
  .edit-preview h1 { font-size: 18px; }
  .view-switch { width: 220px; }
  .template-grid { gap: 9px; }
  .template-button { padding: 6px; }
  .template-button small { font-size: 11px; }
  .print-workspace { grid-template-columns: minmax(0, 1.15fr) minmax(290px, .9fr); }
  .print-controls { padding: 18px; }
  #roster-input { gap: 20px; }
  .paste-roster { padding-left: 20px; }
}
@media (max-width: 740px) {
  .app-shell { padding: 10px 9px 7px; gap: 8px; }
  .app-header { min-height: 61px; gap: 6px; }
  .brand-line { width: 100%; gap: 9px; }
  .home-brand { font-size: 21px; gap: 8px; }
  .brand-mark { width: 33px; height: 33px; }
  .site-badge { font-size: 11px; padding: 4px 6px; }
  .service-entry { margin-left: auto; font-size: 12px; min-height: 33px; padding: 3px 0; gap: 3px; }
  .service-entry svg { width: 12px; height: 12px; }
  .session-summary { font-size: 11px; color: #4d5661; }
  .workspace-nav { border-radius: 11px; padding: 4px; gap: 3px; }
  .workspace-nav button { gap: 6px; min-height: 44px; border-radius: 7px; font-size: 13px; padding: 7px 3px; }
  .workspace-step { width: 20px; height: 20px; font-size: 10px; }
  .panel { border-radius: 13px; }
  #screen-edit { gap: 9px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 252px auto; }
  .design-specs { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 11px; gap: 7px 12px; border-radius: 11px; }
  .design-specs>.segmented { width: 100%; }
  .design-specs>.segmented button { min-height: 42px; font-size: 13px; }
  .quick-dimensions { width: 100%; gap: 9px; }
  .quick-dimensions label { font-size: 11px; }
  .quick-dimensions input { height: 42px; padding: 7px 9px; font-size: 16px; }
  .dimensions-unit { font-size: 11px; padding-bottom: 12px; }
  .design-specs>.quiet-button { min-height: 44px; font-size: 12px; padding: 5px 0; }
  #screen-edit>.edit-preview { height: 252px; padding: 10px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
  .edit-preview .panel-heading, .current-style-name { display: none; }
  .view-switch { width: 182px; grid-column: 2; grid-row: 1; padding: 2px; margin: 0; }
  .view-switch button { min-height: 38px; font-size: 12px; }
  .edit-preview .status-copy { grid-column: 1; grid-row: 1; font-size: 11px; line-height: 1.4; margin: 0; }
  .canvas-stage { min-height: 0; border-radius: 8px; grid-column: 1/-1; grid-row: 2; }
  .edit-preview .preview-caption { grid-column: 1/-1; grid-row: 3; font-size: 11px; margin: 0; }
  .tool-tabs { padding: 7px; gap: 3px; }
  .tool-tabs button { min-height: 44px; font-size: 13px; padding: 7px 3px; }
  .tool-panel { padding: 17px 15px; }
  .tool-panel h2 { font-size: 18px; }
  .tool-panel>.name-limit { margin: 5px 0 13px; font-size: 13px; }
  .name-input { font-size: 24px; min-height: 51px; }
  .fields input, .fields select { font-size: 16px; min-height: 44px; }
  .type-row input, .type-row select { font-size: 14px; height: 44px; }
  .scene-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .scene-choices button, .scene-choices button[data-scene-choice=designer] { min-height: 44px; }
  #tool-background>.scene-choice select { min-height: 44px; font-size: 16px; }
  .background-cycle span { font-size: 11px; }
  #tool-background .background-cycle .quiet-button { min-height: 44px; }
  .template-grid { gap: 11px; }
  .template-button { padding: 7px 7px 9px; }
  .template-button>span { font-size: 12px; margin: 0 1px; }
  .template-button small { margin: 5px 1px 0; font-size: 11px; line-height: 1.5; }
  .template-button canvas { margin-bottom: 8px; }
  .color-options { gap: 6px; }
  .color-swatch { width: auto; height: auto; min-width: 0; min-height: 44px; }
  .custom-color input[type=color] { min-height: 44px; width: 44px; }
  .color-reset { min-height: 44px; }
  .roster-workspace { padding: 17px 14px; }
  .roster-workspace h1, .print-preview h1 { font-size: 19px; }
  .roster-tabs { width: 100%; max-width: 100%; margin-bottom: 14px; }
  .roster-tabs button { min-height: 44px; }
  #roster-input { display: block; padding: 0 0 12px; }
  .excel-import h2, .paste-roster h2 { font-size: 18px; }
  .excel-file-actions { gap: 7px; }
  .excel-file-actions button { font-size: 13px; min-height: 44px; }
  .paste-roster { padding: 20px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid #d6dbe2; }
  .roster-panel textarea { height: 220px; min-height: 150px; font-size: 16px; }
  .print-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(240px, 46%) minmax(0, 1fr); gap: 9px; }
  .print-preview { padding: 12px; }
  .print-preview .panel-heading { margin-bottom: 9px; }
  .print-preview h1 { font-size: 17px; }
  .sheet-wrap { padding: 9px; border-radius: 8px; }
  .print-controls { padding: 19px 17px; }
  .print-controls h2 { font-size: 20px; }
  .print-controls .export-actions { gap: 9px; margin-top: 14px; }
  .print-controls .instruction-card { padding-top: 16px; margin-top: 19px; }
  .workspace-footer { min-height: 49px; padding: 4px 6px; gap: 7px; border-radius: 10px; }
  .workspace-footer>.primary-button { min-height: 42px; max-width: 145px; font-size: 13px; padding: 8px 10px; }
  .workspace-footer>.quiet-button { min-height: 42px; font-size: 12px; }
  .session-note { font-size: 10px; max-width: 95px; }
}
@media (max-width: 360px) {
  .app-shell { padding-left: 7px; padding-right: 7px; }
  .site-badge { display: none; }
  .home-brand { font-size: 20px; }
  .service-entry { font-size: 11px; }
  .workspace-nav button { font-size: 12px; gap: 5px; }
  .workspace-step { width: 18px; height: 18px; font-size: 10px; }
  .view-switch { width: 167px; }
  .view-switch button { font-size: 11px; }
  .tool-panel { padding: 15px 12px; }
  .template-grid { gap: 8px; }
  .template-button { padding: 6px; }
  .template-button small { font-size: 11px; }
  .workspace-footer { gap: 3px; }
  .workspace-footer>.primary-button { padding-left: 6px; padding-right: 6px; }
  .session-note { max-width: 68px; }
  .person-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Tall phones keep the specimen and active tool visible together.  The tool
   viewport scrolls independently; workspace navigation never scrolls the
   specimen away when it focuses the next tab. */
@media (max-width: 740px) and (min-height: 651px) {
  .workspace-viewport:has(>#screen-edit:not([hidden])) { overflow: hidden; scrollbar-gutter: auto; }
  #screen-edit { height: 100%; min-height: 0; grid-template-rows: auto minmax(150px, 32%) minmax(0, 1fr); }
  #screen-edit>.design-specs { padding: 5px 10px; gap: 5px 10px; }
  #screen-edit>.design-specs>.segmented { padding: 2px; }
  #screen-edit .quick-dimensions { align-items: stretch; gap: 8px; }
  #screen-edit .quick-dimensions label { position: relative; display: block; }
  #screen-edit .quick-dimensions label>span { position: absolute; z-index: 1; top: 4px; left: 8px; font-size: 11px; line-height: 11px; pointer-events: none; }
  #screen-edit .quick-dimensions input { height: 44px; min-height: 44px; margin: 0; padding: 17px 8px 3px; font-size: 16px; line-height: 20px; }
  #screen-edit .dimensions-unit { align-self: end; padding-bottom: 11px; }
  #screen-edit>.edit-preview { height: auto; min-height: 0; overflow: hidden; }
  #screen-edit>.edit-controls { min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
  #screen-edit .tool-viewport { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}
/* Preserve the established page-scroll fallback in short windows. */
@media (max-width: 1000px) and (max-height: 650px) {
  .app-header { min-height: 48px; }
  #screen-edit { grid-template-rows: auto 220px auto; }
  #screen-edit>.edit-preview { height: 220px; }
  .edit-controls { min-height: 320px; }
  .print-workspace { grid-template-rows: 280px auto; }
  .print-controls { overflow: visible; }
  .preview-caption { display: block; }
}
@media (min-width: 1001px) and (max-height: 650px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  .app-shell { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto auto; }
  .workspace-screen { height: auto; }
  .edit-workspace { grid-template-rows: auto 400px; }
  .edit-preview, .edit-controls { height: 400px; }
  .print-workspace { min-height: 470px; }
  .print-preview, .print-controls { height: 470px; }
  .roster-workspace { min-height: 440px; }
  .roster-viewport { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  button, .template-button canvas { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .design-specs, .workspace-footer { background: #eff2f5; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* One live drawing surface beside the active tool. The original specification
   controls move into their tab on phones; no cloned form or preview is used. */
.mobile-tool-actions, .preview-state, .layout-preview-title, .layout-preview-caption { display: none; }
.workspace-nav { grid-template-columns: repeat(3, minmax(0,1fr)); }
.roster-return { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #596371; font-size: 12px; }
.roster-return .quiet-button { min-height: 44px; padding-left: 0; }
/* Keep the roster's tools in a small toolbar, leaving the work area to the list.
   Phones use one title row and one full-width, touch-sized tab row. */
.roster-workspace { padding: 14px 20px; }
.roster-workspace .roster-heading { display: grid; grid-template-columns: auto minmax(0, auto) auto minmax(0, 1fr); align-items: center; gap: 8px 12px; flex: 0 0 auto; margin: 0 0 10px; }
.roster-heading .roster-return { margin: 0; }
.roster-heading .roster-return .quiet-button { min-height: 44px; padding: 8px 4px; font-size: 13px; white-space: nowrap; }
.roster-heading h1 { font-size: 20px; line-height: 1.4; margin: 0; }
.roster-heading .preview-badge { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.roster-heading .roster-tabs { justify-self: end; width: 350px; max-width: 100%; margin: 0; padding: 4px; }
.roster-heading .roster-tabs button { min-height: 44px; }
@media (max-width: 740px) {
  .roster-workspace { padding: 12px 14px; }
  .roster-workspace .roster-heading { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; margin-bottom: 8px; }
  .roster-heading h1 { font-size: 16px; }
  .roster-heading .roster-return .quiet-button { font-size: 12px; padding: 8px 0; }
  .roster-heading .preview-badge { font-size: 11px; padding: 5px 7px; }
  .roster-heading .roster-tabs { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
}
.roster-collaboration { flex: 0 0 auto; margin: 0 0 8px; padding: 0; font-size: 12px; }
.roster-collaboration summary { min-height: 44px; cursor: pointer; }
.roster-collaboration p { line-height: 1.6; max-width: 65ch; }
.collaboration-launch { padding: 0 0 10px; }
.collaboration-launch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.collaboration-launch-actions button { min-height: 44px; }
.collaboration-incoming { margin: 0 0 20px; padding: 16px; border: 1px solid #9ca5b1; border-radius: 12px; background: #eaeef4; box-shadow: inset 0 1px #ffffff, 0 4px 10px -8px #2b3747; }
.collaboration-incoming .transfer-receive-table { max-height: 250px; overflow: auto; }
.collaboration-incoming .excel-confirm-actions { flex-wrap: wrap; }
.phone-receive-connection[data-source="desktop"] { flex-direction: column; align-items: stretch; }
.desktop-wechat-connection { width: 100%; max-width: 100%; min-width: 0; }
.desktop-wechat-connection ol { padding-left: 22px; line-height: 1.8; }
.desktop-code-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.desktop-code-actions input { min-width: 0; flex: 1 1 220px; min-height: 44px; padding: 10px; border: 1px solid #919ba9; border-radius: 8px; background: #f7f9fc; color: #2a3645; font: 14px ui-monospace, monospace; }
.desktop-code-actions button { min-height: 44px; }
.typography-field { border-bottom: 1px solid #d8dce2; }
.typography-field>summary { padding: 12px 0; min-height: 44px; color: #3b4654; font-size: 14px; line-height: 1.6; cursor: pointer; }
.typography-field[data-warning=true]>summary { color: #80552f; }
.typography-field .type-row { grid-template-columns: 28px minmax(0,1fr); margin: 5px 0 9px; padding-top: 0; border-top: 0; }
.typography-field .size-presets { margin-left: 0; }
.type-precision>summary, .type-color-disclosure>summary { min-height: 44px; padding: 11px 0; color: #4a535e; font-size: 13px; cursor: pointer; }
.type-precision>.fields { margin: 2px 0 12px; }
.type-color-disclosure .type-color-controls { margin: 0; padding: 2px 0 10px; border: 0; }
.typography-field>.color-status { margin: 0 0 12px; }
@media (max-width: 740px), (max-height: 500px) and (pointer: coarse) {
  body { height: 100dvh; min-height: 0; overflow: hidden; }
  .app-shell { position: fixed; top: var(--workspace-offset-top, 0px); left: 0; right: 0; height: var(--workspace-visible-height, 100dvh); min-height: 0; padding: max(6px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 6px; }
  .app-header { min-height: 38px; gap: 0; justify-content: center; }
  .brand-mark { width: 30px; height: 30px; }
  .home-brand { font-size: 20px; }
  .service-entry { min-height: 44px; }
  .session-summary { display: none; }
  .workspace-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-nav button { min-height: 44px; }
  .workspace-viewport, .workspace-viewport:has(>#screen-edit:not([hidden])) { overflow: hidden; min-height: 0; scrollbar-gutter: auto; }
  #screen-edit { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(194px, calc(var(--workspace-visible-height, 100dvh) * .29), 245px) minmax(0, 1fr); gap: 7px; }
  #screen-edit>.edit-preview { display: grid; height: auto; min-height: 0; overflow: hidden; padding: 7px 9px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px minmax(0, 1fr) 18px; gap: 3px 7px; }
  .edit-preview .panel-heading { display: none; }
  .edit-preview .current-style-name { display: block; grid-column: 1; grid-row: 1; align-self: center; min-width: 0; margin: 0; color: #333c47; font-size: 12px; line-height: 1.4; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .view-switch { grid-column: 2; grid-row: 1; width: 170px; margin: 0; padding: 0; align-self: center; }
  .view-switch button { min-height: 44px; font-size: 12px; padding: 4px 6px; }
  .canvas-stage { grid-column: 1/-1; grid-row: 2; min-height: 0; }
  .edit-preview .preview-caption, .edit-preview .status-copy { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }
  .preview-state { display: block; grid-column: 1/-1; grid-row: 3; align-self: center; font-size: 11px; color: #4d5763; line-height: 18px; text-align: left; }
  .preview-state[data-state=loading] { color: #73562d; }
  .preview-state[data-state=error] { color: #74442f; }
  #screen-edit>.edit-controls { display: grid; min-height: 0; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); }
  .tool-tabs { padding: 5px; gap: 3px; }
  .tool-tabs button { min-height: 44px; font-size: 13px; }
  .mobile-tool-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 5px; border-bottom: 1px solid #d6dbe2; background: #eff2f5; }
  .mobile-tool-actions button { min-height: 44px; min-width: 44px; width: auto; font-size: 12px; padding: 7px 9px; }
  .mobile-tool-actions>.quiet-button { padding-left: 0; }
  .mobile-tool-actions>.secondary-button { border: 0; background: #dfe4ea; }
  #screen-edit .tool-viewport { min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; scrollbar-gutter: auto; scroll-padding: 12px; touch-action: pan-y pinch-zoom; }
  .tool-panel { padding: 12px; }
  .tool-panel input:not([type=checkbox]):not([type=color]):not([type=file]), .tool-panel select { min-height: 44px; font-size: 16px; }
  .tool-panel button, .tool-panel summary, .check-row { min-height: 44px; }
  .tool-panel h2 { font-size: 17px; }
  .tool-panel>.name-limit { font-size: 12px; margin-bottom: 10px; }
  #tool-background>h2, #tool-background>.name-limit { display: none; }
  .background-import { padding-bottom: 10px; margin-bottom: 10px; }
  .background-import>.secondary-button { min-height: 44px; }
  .background-import>#chooseBackgroundImage { display: none; }
  .background-import-help { margin-top: 0; padding-top: 0; font-size: 12px; }
  .background-import:has(#backgroundImageControls[hidden]) { padding-bottom: 4px; margin-bottom: 4px; }
  .background-import .name-limit { margin-top: 6px; line-height: 1.5; }
  .custom-background-button { display: flex; align-items: center; gap: 9px; width: 100%; max-width: none; min-height: 52px; margin-top: 8px; padding: 6px; }
  .custom-background-button canvas { width: 64px; max-height: 40px; object-fit: contain; margin: 0; box-shadow: none; }
  .custom-background-button>span { flex: 1; white-space: normal; }
  .background-import .fields { margin: 9px 0 0; gap: 8px; }
  .background-import .fields label { min-width: 0; }
  .background-import select { width: 100%; }
  #backgroundImageStatus { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #backgroundImageStatus:empty { display: none; }
  #mobileSpecsMount .design-specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px; margin: 10px 0 14px; box-shadow: none; background: #e5e9ee; }
  #mobileSpecsMount .design-specs>.segmented, #mobileSpecsMount .quick-dimensions { width: 100%; grid-column: 1; }
  #mobileSpecsMount .design-specs>.segmented button { min-height: 44px; }
  #mobileSpecsMount .dimension-presets { display: flex; width: 100%; margin: 0; gap: 5px; }
  #mobileSpecsMount .dimension-presets button { flex: 1; padding: 5px; font-size: 11px; }
  #mobileSpecsMount #openSpecs { display: none; }
  #mobileSpecsMount .quick-dimensions label>span { position: static; font-size: 11px; }
  #mobileSpecsMount .quick-dimensions input { min-height: 44px; height: 44px; padding: 7px; margin-top: 3px; }
  .canvas-stage[data-workspace-preview=layout] #deskCanvas, .edit-preview:has([data-workspace-preview=layout]) .view-switch { visibility: hidden; }
  .canvas-stage[data-workspace-preview=layout] #sheetCanvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; background: transparent; box-shadow: none; }
  .edit-preview:has([data-workspace-preview=layout]) .current-style-name { visibility: hidden; }
  .layout-preview-title:not([hidden]) { display: block; grid-column: 1; grid-row: 1; align-self: center; color: #333c47; font-size: 13px; font-weight: 600; pointer-events: none; }
  .layout-preview-caption:not([hidden]) { display: block; grid-column: 1/-1; grid-row: 3; align-self: center; color: #4d5763; font-size: 11px; line-height: 18px; }
  .edit-preview:has([data-workspace-preview=layout]) .preview-state { display: none; }
  .workspace-footer { min-height: 48px; padding: 2px 6px; }
  .workspace-footer>.quiet-button, .workspace-footer>.primary-button { min-height: 44px; }
  .workspace-footer .session-note { max-width: 88px; font-size: 10px; }
  body:has(#screen-edit:not([hidden])) .workspace-footer { display: flex; }
  body:has(#screen-edit:not([hidden])) .workspace-footer .session-note { display: none; }
  .roster-workspace { min-height: 0; overflow: hidden; }
  .roster-viewport { min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
  .roster-panel { height: auto; }
  .print-workspace { height: 100%; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(160px,42%) minmax(0,1fr); }
  .print-controls { min-height: 0; overflow: auto; }
  .print-preview { height: auto; min-height: 0; }
  .print-preview .panel-heading { flex-wrap: nowrap; }
  .print-preview h1 { font-size: 14px; }
  .print-preview .page-nav button { min-height: 44px; }
  .print-preview .page-nav { font-size: 11px; gap: 0; }
  .print-preview .name-limit { font-size: 10px; margin-bottom: 0; }
  body[data-keyboard-open=true] .app-header, body[data-keyboard-open=true] .workspace-footer { display: none; }
  body[data-keyboard-open=true] .app-shell { grid-template-rows: auto minmax(0,1fr); gap: 4px; }
  body[data-keyboard-open=true] #screen-edit { grid-template-rows: 100px minmax(0,1fr); }
  body[data-keyboard-open=true] #screen-edit>.edit-preview { grid-template-rows: 22px minmax(0,1fr); padding: 3px 8px; }
  body[data-keyboard-open=true] .edit-preview .view-switch, body[data-keyboard-open=true] .preview-state, body[data-keyboard-open=true] .layout-preview-caption { display: none; }
  body[data-keyboard-open=true] #screen-edit>.edit-preview .current-style-name { grid-row: 1; font-size: 11px; }
  body[data-keyboard-open=true] #screen-edit>.edit-preview .current-style-name { max-width: none; }
  body[data-keyboard-open=true] .canvas-stage { grid-row: 2; }
  body[data-keyboard-open=true] .mobile-tool-actions #toolQuickAction { display: none; }
}
@media (max-width: 740px) and (max-height: 650px) {
  #screen-edit { grid-template-rows: 194px minmax(0,1fr); }
  body:has(#screen-print:not([hidden])) .workspace-footer { display: none; }
  .print-workspace { grid-template-rows: minmax(228px,46%) minmax(0,1fr); }
  .app-header { min-height: 30px; }
  .site-badge { display: none; }
  .edit-preview .view-switch { width: 158px; }
}
@media (min-width: 600px) and (max-height: 500px) and (pointer: coarse) {
  .app-header { display: none; }
  .workspace-footer { display: flex; }
  .app-shell { grid-template-rows: auto minmax(0,1fr) auto; gap: 5px; }
  #screen-edit { grid-template-columns: minmax(200px,.9fr) minmax(0,1.1fr); grid-template-rows: minmax(0,1fr); }
  #screen-edit>.edit-preview { grid-column: 1; grid-row: 1; height: 100%; }
  #screen-edit>.edit-controls { grid-column: 2; grid-row: 1; }
  .edit-preview .view-switch { width: 155px; }
  .print-workspace { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr); }
}

.roster-import-shortcut { margin: 0 0 18px; min-height: 44px; }

.phone-receive{margin:14px 0 20px;padding:18px;background:#ebeef1;border-radius:12px}.phone-receive-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.phone-receive h3{font-size:17px;margin:0}.phone-receive-heading button{min-height:44px;flex-shrink:0}.phone-receive-connection{display:flex;gap:20px;align-items:center;margin-top:12px}.phone-receive-connection canvas{width:200px;height:200px;max-width:100%;flex-shrink:0;image-rendering:pixelated}.phone-receive-connection p{font-size:13px;color:#4a535e;line-height:1.75;margin:8px 0}.phone-receive-connection strong{font-size:25px;letter-spacing:.14em;color:#2a3544;font-variant-numeric:tabular-nums}.phone-receive>p,.phone-receive #phoneReceiveSummary{font-size:13px;color:#384454;line-height:1.7}.transfer-receive-table{max-width:100%;overflow:auto;scrollbar-color:#768394 #eef0f2}.transfer-receive-table table{width:100%;min-width:620px;border-collapse:collapse;font-size:13px}.transfer-receive-table th,.transfer-receive-table td{text-align:left;padding:9px 11px;border-bottom:1px solid #ccd2d9;max-width:200px;overflow-wrap:anywhere}.transfer-receive-table th{white-space:nowrap}.phone-receive .excel-confirm-actions button{min-height:44px}@media(max-width:740px){.phone-receive{padding:13px}.phone-receive-connection{flex-direction:column;align-items:flex-start;gap:8px}.phone-receive-connection canvas{align-self:center;width:200px;height:200px}.phone-receive h3{font-size:16px}}

.phone-receive-connection img{display:block;width:220px;height:220px;max-width:100%;object-fit:contain;flex-shrink:0;background:#ffffff}.phone-receive-connection img[hidden],.phone-receive-connection[hidden]{display:none}.phone-cleanup:has(p:empty):has(button[hidden]){display:none}.phone-cleanup button,#retryPhoneImport{min-height:44px}.phone-cleanup p{margin:10px 0 4px}@media(max-width:740px){.phone-receive-connection img{align-self:center;width:220px;height:220px}}

/* Material finish: warm daylight, milky acrylic, recessed instruments and paper.
   This layer changes paint only. Geometry and the mobile 44px targets above stay intact. */
:root {
  --material-ink: #282f39;
  --material-muted: #474f5a;
  --material-on-dark: #e9edf2;
  --material-muted-on-dark: #d8dee6;
  --material-acrylic: linear-gradient(137deg, rgba(249, 251, 254, .94) 0%, rgba(244, 247, 250, .83) 44%, rgba(234, 237, 242, .79) 100%);
  --material-acrylic-opaque: linear-gradient(137deg, #f8fafd, #edf0f4 55%, #e4e8ee);
  --material-acrylic-edge: inset 0 1px 0 rgba(255, 255, 255, .98), inset 1px 0 0 rgba(249, 251, 254, .75), inset -1px 0 0 rgba(249, 251, 254, .48), inset 0 -2px 0 rgba(88, 98, 112, .15);
  --material-acrylic-lift: 0 2px 3px rgba(39, 48, 59, .07), 0 14px 30px -17px rgba(33, 42, 54, .34), 0 30px 44px -36px rgba(35, 44, 55, .32);
  --material-dark: linear-gradient(174deg, rgba(65, 77, 92, .97), rgba(41, 53, 68, .97) 58%, rgba(32, 42, 55, .98));
  --material-dark-opaque: linear-gradient(174deg, #414d5c, #293544 58%, #202a37);
  --material-dark-edge: inset 0 1px 0 rgba(220, 227, 236, .46), inset 1px 0 0 rgba(223, 229, 237, .14), inset 0 -2px 0 rgba(12, 19, 28, .29);
  --material-action: linear-gradient(175deg, #404d5f, #2d3a4c 62%, #263241);
  --material-control: linear-gradient(168deg, rgba(249, 251, 254, .96), rgba(223, 229, 236, .94));
  --material-control-edge: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(105, 118, 134, .12);
  --material-input: linear-gradient(180deg, #e5e8ed 0%, #f8fafd 28%, #f4f7fa 100%);
  --material-input-cut: inset 0 2px 4px rgba(51, 59, 70, .10), inset 0 1px 0 rgba(51, 60, 71, .13), 0 1px 0 rgba(249, 251, 253, .91);
  --studio-muted: var(--material-muted);
  --muted: var(--material-muted);
  background: #cdd2d8;
}
body {
  background:
    linear-gradient(116deg, rgba(229, 237, 248, .76) 0%, rgba(236, 242, 250, .20) 43%, rgba(227, 231, 237, 0) 66%),
    linear-gradient(13deg, rgba(51, 60, 71, .12), rgba(51, 60, 71, 0) 49%),
    linear-gradient(134deg, #dce0e6 4%, #d6dae0 43%, #bfc5cc 100%);
}
/* Surface edges describe thickness; the displaced soft shadow describes lift. */
.panel, .design-specs, .workspace-footer {
  background: var(--material-acrylic);
  box-shadow: var(--material-acrylic-edge), var(--material-acrylic-lift);
}
.edit-controls { background: linear-gradient(135deg, rgba(250, 252, 254, .97), rgba(240, 243, 248, .90)); }
.edit-preview, .print-preview { background: linear-gradient(141deg, rgba(242, 246, 252, .95), rgba(232, 237, 243, .87)); }
.design-specs, .workspace-footer { box-shadow: var(--material-acrylic-edge), 0 5px 12px -8px rgba(34, 44, 58, .27); }
.workspace-nav {
  color: var(--material-on-dark);
  background: var(--material-dark);
  box-shadow: var(--material-dark-edge), 0 8px 16px -10px rgba(22, 31, 43, .47);
}
.workspace-nav button { color: var(--material-on-dark); }
.workspace-nav button:hover:not(:disabled) { background: rgba(219, 226, 236, .10); box-shadow: inset 0 1px 0 rgba(234, 239, 246, .15); }
.workspace-nav button[aria-current=page] {
  color: #2b3644;
  background: linear-gradient(172deg, #f5f9fd, #e2e7ed);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(95, 106, 121, .13), 0 3px 6px rgba(16, 23, 32, .21);
}
.workspace-nav button[aria-current=page]:hover:not(:disabled) { background: linear-gradient(172deg, #f7fafd, #dce2e9); }
.workspace-step { color: var(--material-on-dark); border-color: rgba(215, 224, 235, .52); }
[aria-current=page] .workspace-step { background: #394554; color: #e9f0f9; border-color: #394554; box-shadow: inset 0 1px 0 rgba(238, 244, 251, .22); }
.site-badge, .preview-badge {
  color: #424a55;
  background: linear-gradient(155deg, rgba(244, 247, 252, .76), rgba(211, 218, 228, .70));
  box-shadow: inset 0 1px 0 rgba(251, 252, 254, .94), inset 0 -1px 0 rgba(88, 100, 115, .12);
}
.home-brand { text-shadow: 0 1px 0 rgba(245, 248, 252, .84); }
.brand-mark { filter: drop-shadow(0 2px 2px rgba(37, 47, 59, .15)); }
.session-summary, .session-note, .name-limit, .privacy-note, .status-copy,
.preview-caption, .page-nav, .fields label, .name-label, .type-row label,
.scene-choice, .unit, .check-row, .help, .brand-control, .logo-controls,
.excel-sheet-label, .excel-mapping label, .roster-return, .batch-copy,
.color-status, .custom-color, .font-license-info, .background-cycle span {
  color: var(--material-muted);
}
/* White artwork remains visually distinct from the recessed desktop under it. */
.canvas-stage {
  background: linear-gradient(160deg, #d7dbe1, #bdc4cc);
  box-shadow: inset 0 2px 5px rgba(33, 42, 54, .17), 0 1px 0 rgba(249, 251, 253, .94);
}
.canvas-stage::after { box-shadow: inset 0 1px 0 rgba(248, 250, 253, .84), inset 0 7px 15px -10px rgba(29, 37, 48, .33), inset 0 -1px 0 rgba(246, 249, 253, .62); }
.sheet-wrap { background: linear-gradient(155deg, #cacfd6, #b0b7c1); box-shadow: inset 0 3px 8px rgba(33, 42, 54, .16), inset 0 1px 0 rgba(245, 248, 252, .70), 0 1px 0 rgba(249, 251, 254, .91); }
#sheetCanvas { box-shadow: 0 2px 3px rgba(28, 35, 44, .18), 0 14px 24px -10px rgba(29, 36, 44, .38); }
/* Navigation wells and buttons use different reflections from the working plate. */
.segmented, .roster-tabs {
  background: linear-gradient(180deg, rgba(193, 200, 208, .70), rgba(219, 225, 232, .86));
  box-shadow: inset 0 2px 4px rgba(48, 57, 68, .13), 0 1px 0 rgba(248, 250, 253, .93);
}
.segmented button { color: #454d58; }
.segmented button[aria-pressed=true] { color: #2e3947; background: linear-gradient(175deg, #f9fbfd, #e7ebf0); box-shadow: var(--material-control-edge), 0 2px 4px rgba(37, 46, 57, .16); }
.tool-tabs { background: linear-gradient(180deg, rgba(249, 251, 253, .88), rgba(217, 223, 231, .70)); border-bottom-color: rgba(118, 131, 148, .32); box-shadow: inset 0 1px 0 #f9fbfe; }
.mobile-tool-actions { background: linear-gradient(180deg, #e9edf2, #dee4eb); border-bottom-color: #c0c7d1; }
.primary-button, .tool-tabs button[aria-selected=true], .scene-choices button[aria-pressed=true] {
  color: #eef4fb;
  background: var(--material-action);
  box-shadow: inset 0 1px 0 rgba(219, 229, 243, .42), inset 0 -1px 0 rgba(16, 24, 35, .32), 0 3px 6px -2px rgba(31, 42, 56, .24);
}
.primary-button:hover:not(:disabled), .scene-choices button[aria-pressed=true]:hover { background: linear-gradient(175deg, #394656, #243040); }
.secondary-button, .batch-button, .scene-choices button, .size-presets button,
.dimension-presets button, .color-swatch, .mobile-tool-actions>.secondary-button,
.background-import>.secondary-button {
  color: #3c4550;
  background: var(--material-control);
  border-color: #b4bdc8;
  box-shadow: var(--material-control-edge), 0 2px 3px -2px rgba(51, 62, 76, .20);
}
.secondary-button:hover:not(:disabled), .batch-button:hover:not(:disabled),
.scene-choices button:hover, .size-presets button:hover, .color-swatch:hover { background: linear-gradient(165deg, #f5f8fc, #d4dce6); }
.dimension-presets button[aria-pressed=true], .size-presets button[aria-pressed=true], .color-swatch[aria-pressed=true] {
  color: #2e3948; background: linear-gradient(168deg, #dae1ea, #c1cbd9); border-color: #687688; box-shadow: inset 0 1px 0 #f1f5fb, inset 0 -1px 0 rgba(64, 80, 101, .15);
}
button:active:not(:disabled) { filter: none; box-shadow: inset 0 2px 5px rgba(26, 35, 46, .24), inset 0 -1px 0 rgba(244, 247, 252, .42); }
.quiet-button:hover { background: rgba(201, 210, 221, .56); }
/* These controls are cut into the acrylic: no per-field blur, no floating halo. */
.fields input, .fields select, .name-input, .type-row input, .type-row select,
.scene-choice select, .excel-sheet-label select, .excel-mapping select,
.roster-panel textarea, .quick-dimensions input, .custom-color input[type=text],
#tool-background>.scene-choice select, #mobileSpecsMount .quick-dimensions input {
  color: #2c3642; background: var(--material-input); border-color: #a5aeb9; box-shadow: var(--material-input-cut);
}
input::placeholder, textarea::placeholder { color: #4e5864; }
select option, select optgroup { color: #2f3844; background: #f1f4f9; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--material-input-cut); }
/* Gallery pieces read as printed samples, not more translucent nested panels. */
.template-button {
  color: #39414c; background: linear-gradient(155deg, #f3f6fb, #dde3ea);
  box-shadow: inset 0 1px 0 #f9fbfe, inset 0 -1px 0 rgba(89, 103, 121, .15), 0 3px 7px -5px rgba(39, 51, 66, .26);
}
.template-button:hover { background: linear-gradient(155deg, #f5f9fd, #d3dae4); }
.template-button[aria-pressed=true] { background: linear-gradient(155deg, #e3eaf3, #c3cedd); box-shadow: inset 0 1px 0 #f6f9fd, inset 0 -1px 0 rgba(53, 70, 93, .18); }
.template-button canvas { box-shadow: 0 1px 2px rgba(35, 45, 57, .18), 0 5px 9px -4px rgba(33, 43, 57, .30); }
.template-button small { color: #3d4856; }
.custom-background-button canvas { box-shadow: 0 1px 3px rgba(37, 47, 60, .16); }
.size-summary, .empty-state, .generation-facts { background: linear-gradient(155deg, #e6ebf1, #d4dbe4); color: #3d444e; box-shadow: inset 0 1px 0 #f6f9fd, inset 0 -1px 0 rgba(75, 91, 112, .12); }
.phone-receive { background: linear-gradient(156deg, #ecf0f5, #d2dae5); box-shadow: inset 0 1px 0 #f9fbfe, inset 0 -1px 0 rgba(74, 91, 114, .18); }
.phone-import-state { display: flex; align-items: center; gap: 6px 12px; margin: 5px 0 10px; min-width: 0; }
.phone-import-state p { flex: 1; min-width: 0; margin: 0; color: #4a535e; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.phone-import-state .quiet-button { flex: 0 0 auto; min-height: 44px; padding: 8px 2px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.excel-file-actions button[aria-pressed="true"] { border-color: #3d4a5c; box-shadow: inset 0 0 0 1px #3d4a5c, inset 0 1px #f0f5fb; }
.phone-receive { scroll-margin-block: 12px; }
.phone-receive h3:focus { outline: 2px solid #596371; outline-offset: 4px; }
.phone-switch-dialog { width: min(440px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border: 1px solid #b6bdc7; border-radius: 16px; color: #2f3a48; background: linear-gradient(145deg, #f7fafd, #e8ecf1); box-shadow: 0 24px 70px #1d28374d, inset 0 1px #ffffff; }
.phone-switch-dialog::backdrop { background: #1e283559; backdrop-filter: blur(3px); }
.phone-switch-dialog h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.4; }
.phone-switch-dialog p { margin: 0 0 18px; font-size: 14px; line-height: 1.8; }
.phone-switch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.phone-switch-actions button { flex: 1 1 160px; min-height: 44px; font-size: 13px; }
@media (max-width: 740px) { .phone-import-state { align-items: flex-start; } .phone-import-state .quiet-button { margin-top: -6px; } .phone-switch-dialog { padding: 18px; } }
.person-chip { color: #313b47; background: linear-gradient(155deg, #f6f9fd, #e1e6ec); border-color: #b3bdca; box-shadow: var(--material-control-edge); }
.person-chip:hover { background: linear-gradient(155deg, #ecf2f9, #d4dce6); }
.person-chip[aria-pressed=true] { color: #2d3847; border-color: #6b7b91; background: linear-gradient(155deg, #e0e8f2, #c0ccdb); box-shadow: inset 0 1px 0 #f8fafd, inset 0 -1px 0 rgba(53, 70, 93, .17); }
.excel-preview-table { background: #f6f8fb; border-color: #b3bdc9; box-shadow: inset 0 2px 3px rgba(42, 55, 71, .08); }
.excel-preview-table th, .transfer-receive-table th { color: #333c48; background: linear-gradient(180deg, #dbe1e8, #e8ecf2); }
.excel-preview-table td, .transfer-receive-table td { color: #3a424d; border-bottom-color: #cbd2dc; }
.excel-preview-table tbody tr:nth-child(even), .transfer-receive-table tbody tr:nth-child(even) { background: rgba(212, 220, 230, .43); }
/* The print controls are a darker material, with the same daylight direction. */
.print-controls { color: var(--material-on-dark); background: var(--material-dark); box-shadow: var(--material-dark-edge), var(--material-acrylic-lift); }
.print-controls h2, .print-controls h3 { color: #e5eef9; }
.print-controls .name-limit, .print-controls .privacy-note, .print-controls .quiet-button,
.print-controls .instruction-card, .print-controls .copy-number, .print-controls .copy-settings>summary { color: var(--material-muted-on-dark); }
.print-controls .instruction-card, .copy-settings, .last-pdf { border-color: rgba(187, 200, 217, .32); }
.print-controls .primary-button, .copy-presets button[aria-pressed=true] {
  color: #323b47; background: linear-gradient(170deg, #e1eaf7, #c9d4e2); border-color: #cdd7e4;
  box-shadow: inset 0 1px 0 #f4f7fc, inset 0 -1px 0 rgba(71, 88, 110, .22), 0 3px 6px rgba(16, 23, 32, .24);
}
.print-controls .primary-button:hover:not(:disabled) { background: linear-gradient(170deg, #ecf2fa, #d0dae8); }
.print-controls .secondary-button, .copy-presets button { color: #e6ecf3; background: linear-gradient(170deg, #495565, #384351); border-color: #727f90; box-shadow: inset 0 1px 0 rgba(206, 219, 237, .29), inset 0 -1px 0 rgba(22, 30, 40, .27); }
.print-controls .secondary-button:hover:not(:disabled) { background: linear-gradient(170deg, #505a68, #3c4858); }
.print-controls .copy-number input { color: #333c47; background: var(--material-input); box-shadow: var(--material-input-cut); }
.generation-dialog { background: var(--material-acrylic-opaque); box-shadow: var(--material-acrylic-edge), 0 22px 56px rgba(20, 29, 40, .30); }
/* Only the enclosing plates sample the environment. Child controls never blur. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { -webkit-backdrop-filter: blur(16px) saturate(112%); backdrop-filter: blur(16px) saturate(112%); }
  .workspace-nav, .design-specs, .workspace-footer { -webkit-backdrop-filter: blur(10px) saturate(110%); backdrop-filter: blur(10px) saturate(110%); }
}
button:disabled { opacity: 1; color: #4e5864; background: linear-gradient(180deg, #dbdfe5, #cfd5dd); border-color: #bac1cb; box-shadow: inset 0 1px 0 rgba(248, 250, 253, .70); filter: none; }
.print-controls button:disabled { color: #b5bdc8; background: linear-gradient(180deg, #384250, #2d3745); border-color: #5d6978; box-shadow: inset 0 1px 0 rgba(197, 209, 224, .14); }
input:disabled, select:disabled { color: #4c5561; background: #dee2e7; box-shadow: inset 0 1px 3px rgba(42, 52, 64, .08); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, .excel-preview-table:focus-visible { outline-color: #75512d; }
.workspace-nav button:focus-visible, .print-controls button:focus-visible, .print-controls summary:focus-visible { outline: 2px solid #d2e1f4; outline-offset: 2px; box-shadow: 0 0 0 4px #2a3442; }
@media (max-width: 740px), (max-height: 500px) and (pointer: coarse) {
  .panel, .design-specs { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .workspace-nav, .workspace-footer { -webkit-backdrop-filter: blur(8px) saturate(108%); backdrop-filter: blur(8px) saturate(108%); }
  .panel { box-shadow: var(--material-acrylic-edge), 0 5px 13px -8px rgba(34, 43, 55, .31); }
  .canvas-stage[data-workspace-preview=layout] #sheetCanvas { box-shadow: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .design-specs, .workspace-footer { background: var(--material-acrylic-opaque); }
  .workspace-nav, .print-controls { background: var(--material-dark-opaque); }
}
@media (prefers-reduced-transparency: reduce) {
  .panel, .design-specs, .workspace-footer { background: var(--material-acrylic-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .workspace-nav, .print-controls { background: var(--material-dark-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .edit-preview, .print-preview { background: linear-gradient(141deg, #f1f5fb, #e2e8f0); }
}
@media (prefers-reduced-motion: reduce) {
  button, .template-button canvas, input, select, textarea { transition: none !important; }
}

/* Crease marks are an output choice, next to the paper preview and final confirmation. */
.fold-print-settings { margin: 12px 0; padding: 12px 0; border-block: 1px solid rgba(187, 200, 217,.32); }
.fold-print-settings label, .generation-fold label { display: flex; align-items: center; gap: 9px; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.4; }
.fold-print-settings input, .generation-fold input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: #394555; }
.fold-print-settings .name-limit { margin: 2px 0 0; }
.generation-fold { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 13px; padding: 12px; margin-top: 12px; border: 1px solid #bbc2ca; border-radius: 10px; background: #eaedf0; }
.generation-fold canvas { display: block; width: 76px; height: auto; box-shadow: 0 2px 7px #2b344025; }
.generation-dialog .generation-fold p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
@media (max-width:360px), (max-height:650px) { .generation-fold { grid-template-columns: 50px minmax(0,1fr); gap: 9px; padding: 8px; margin-top: 9px; } .generation-fold canvas { width: 50px; } .generation-fold label { font-size: 14px; } }

/* Companion Studio brand: original blue/orange mark, clear product identity. */
:root { --studio-ink: #172334; --studio-muted: #596a80; --studio-deep: #004ea2; --studio-paper: #f8faff; --studio-line: #d6e0ef; --studio-copper: #f08300; --ink: #172334; --muted: #596a80; --accent: #004ea2; --line: #d6e0ef; }
.home-brand .brand-image { display: block; width: 184px; height: auto; max-width: 100%; }
.primary-button { color: #fff; background: linear-gradient(166deg,#0862ba,#004ea2); border-color: #004ea2; box-shadow: inset 0 1px 0 #ffffff3d, inset 0 -1px 0 #003d7f4d, 0 3px 8px #023f8021; }
.primary-button:hover:not(:disabled) { background: linear-gradient(166deg,#0757a7,#003f84); }
.primary-button:disabled { color: #5c6d84; background: linear-gradient(180deg,#e6ecf5,#dbe3ef); border-color: #c6d2e4; }
.workspace-nav { background: linear-gradient(165deg,#274a76,#172f54); }
.workspace-nav button[aria-current=page] { color: #004ea2; background: linear-gradient(170deg,#fff,#edf3fc); }
[aria-current=page] .workspace-step { color: #fff; background: #004ea2; border-color: #004ea2; }
.tool-tabs button[aria-selected=true], .scene-choices button[aria-pressed=true] { color: #fff; background: linear-gradient(165deg,#0862ba,#004ea2); border-color: #004ea2; }
.template-button[aria-pressed=true] { outline-color: #004ea2; }
.template-button[aria-pressed=true]::after { background: #004ea2; }
.check-row input, .generation-upload input, .generation-fold input, .fold-print-settings input, input[type=checkbox], input[type=radio] { accent-color: #004ea2; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #004ea2; }
.print-controls .primary-button { color: #fff; background: linear-gradient(166deg,#0862ba,#004ea2); border-color: #5e9bda; }
.print-controls .primary-button:hover:not(:disabled) { color: #fff; background: linear-gradient(166deg,#0b66bf,#08559f); }
@media(max-width:740px) { .home-brand .brand-image { width: 146px; } }

/* Refined instrument surfaces: clear type and thin edges; keep all hit areas. */
:root {
  --material-acrylic-lift: 0 1px 2px rgba(25,45,70,.035), 0 12px 25px -18px rgba(25,45,70,.22);
  --material-acrylic-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(77,101,134,.09);
  --material-control-edge: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(25,45,70,.035);
  --material-input-cut: inset 0 1px 2px rgba(37,59,88,.055), 0 1px 0 rgba(255,255,255,.7);
}
.app-header { min-height: 46px; }
.home-brand .brand-image { width: 180px; }
.service-entry, .account-entry { font-weight: 500; font-size: 13px; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.service-entry { margin-left: 3px; padding-left: 15px; border-left: 1px solid #bdcadd; line-height: 1.3; }
.panel { border: 1px solid rgba(255,255,255,.76); border-radius: 14px; }
.edit-preview h1 { font-size: clamp(19px,1.65vw,23px); font-weight: 600; letter-spacing: .01em; line-height: 1.45; }
h2, .tool-panel h2, .print-controls h2 { font-size: 18px; font-weight: 600; letter-spacing: .01em; }
.workspace-nav { padding: 4px; border-radius: 12px; box-shadow: 0 4px 12px -8px rgba(21,43,72,.3), inset 0 1px 0 #ffffff26; }
.workspace-nav button { min-height: 44px; font-weight: 500; border-radius: 9px; font-size: 14px; gap: 10px; }
.workspace-step { width: 23px; height: 23px; font-size: 11px; font-weight: 500; }
.workspace-nav button[aria-current=page] { box-shadow: inset 0 1px 0 #fff, 0 1px 3px #132c4d1a; }
.primary-button, .secondary-button, .batch-button, .quiet-button { font-weight: 500; }
.primary-button { min-height: 44px; font-size: 14px; box-shadow: inset 0 1px 0 #ffffff26, 0 2px 5px #003f841c; }
.primary-button:hover:not(:disabled) { box-shadow: inset 0 1px 0 #ffffff26, 0 3px 8px #003f8426; }
.secondary-button, .batch-button { font-size: 14px; border-color: #c6d3e4; box-shadow: inset 0 1px 0 #ffffffa6; }
.tool-tabs { gap: 4px; padding: 7px; }
.tool-tabs button { min-height: 44px; font-size: 14px; font-weight: 500; border-radius: 7px; }
.tool-tabs button[aria-selected=true] { color: #004ea2; background: #e7effa; box-shadow: inset 0 -2px 0 #004ea2; }
.segmented button { font-weight: 500; }
.segmented button[aria-pressed=true] { box-shadow: inset 0 1px #ffffffd9, 0 1px 3px #263e5a0d; }
.name-label, .scene-choice, .type-row>span { font-weight: 500; }
.fields input, .fields select, .name-input, .type-row input, .type-row select, .scene-choice select, .roster-panel textarea { border-color: #c6d3e4; }
.template-button { padding: 7px 7px 8px; border-radius: 8px; box-shadow: inset 0 1px 0 #fff, 0 2px 6px -4px #263e5a26; }
.template-button>span { font-weight: 500; font-size: 12px; }
.template-button[aria-pressed=true] { outline-width: 1.5px; outline-offset: -1.5px; }
.template-button[aria-pressed=true]::after { width: 14px; height: 14px; }
.template-button[aria-pressed=true]::before { top: 16px; right: 17px; width: 4px; height: 7px; }
.template-button canvas { box-shadow: 0 1px 2px #263e5a1a; }
.person-chip { font-weight: 400; border-radius: 8px; box-shadow: inset 0 1px 0 #ffffffa6; }
.print-controls h3, .instruction-card h3 { font-weight: 600; }
.print-controls .primary-button { box-shadow: inset 0 1px 0 #ffffff26, 0 2px 6px #0b1a2d26; }
.generation-dialog { border-radius: 15px; box-shadow: inset 0 1px 0 #fff, 0 18px 55px #142e4d3b; }
.generation-dialog h2 { font-size: 22px; font-weight: 600; }
.generation-facts strong { font-size: 18px; font-weight: 500; }
.generation-actions button, .generation-fold label, .fold-print-settings label { font-weight: 500; }
.generation-fold { border-color: #cbd7e6; }
.workspace-footer>.primary-button { min-height: 44px; }
@media(max-width:740px) {
  .home-brand .brand-image { width: 144px; }
  .app-header { min-height: 44px; }
  .workspace-nav button { font-size: 13px; gap: 7px; }
  .workspace-step { width: 21px; height: 21px; }
  .tool-tabs button { font-size: 13px; }
}