@font-face {
  font-family: "OC Fusion Pixel";
  src: url("./fonts/fusion-pixel/fusion-pixel-10px-monospaced-latin.otf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF;
}
@font-face {
  font-family: "OC Bodoni Moda";
  src: url("./fonts/BodoniModa-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-024F,U+1E00-1EFF,U+2000-206F;
}

:root {
  color-scheme: light;
  --ui-accent: #59666d;
  --ui-accent-dark: #354149;
  --ui-accent-soft: #e4e8e9;
  --ui-bg: #e7e9e9;
  --ui-panel: #f7f6f3;
  --ui-card: #fcfbf8;
  --ui-line: #c8cdce;
  --ui-line-strong: #a9b0b2;
  --ui-text: #292e31;
  --ui-muted: #667176;
  --topbar-height: 64px;
  --font-ui: "OC Noto Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-serif: "OC Noto Serif SC","Noto Serif SC","Songti SC",serif;
  --font-mono: Consolas,"Courier New",monospace;
  font-family: var(--font-ui);
}
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body { width: 100%; height: 100vh; height: 100dvh; min-width: 320px; margin: 0; overflow: hidden; display: grid; grid-template-rows: var(--topbar-height) minmax(0,1fr); color: var(--ui-text); background: var(--ui-bg); }
body.is-export-busy { cursor: progress; }
body.is-export-busy button { cursor: progress; }
button,input,textarea,select { font: inherit; color: inherit; }
button,.file-button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
button:active,.file-button:active { transform: translateY(1px); }
[hidden] { display: none !important; }

.topbar { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); background: rgba(249,248,245,.98); position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 230px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px 9px 5px 5px; background: var(--ui-accent); color: #fff; font-family: var(--font-serif); font-size: 23px; font-weight: 800; box-shadow: 4px 4px 0 #d4d9da; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy b { font-family: var(--font-serif); font-size: 18px; line-height: 1.2; }
.brand-copy small { color: var(--ui-muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.project-field { flex: 1; max-width: 420px; display: grid; grid-template-columns: auto minmax(160px,1fr); align-items: center; gap: 8px; }
.project-field span { color: var(--ui-muted); font-size: 12px; font-weight: 700; }
.project-field input { height: 40px; min-width: 0; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.button,.preview-actions button { min-height: 38px; padding: 0 13px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 750; white-space: nowrap; }
.button:hover,.preview-actions button:hover { border-color: var(--ui-accent); }
.button.primary { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.button.quiet { background: transparent; }
.button.compact { min-height: 34px; padding-inline: 10px; font-size: 12px; }
.button:disabled { opacity: .4; cursor: default; }
.file-button { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: var(--ui-accent-dark); cursor: pointer; font-size: 12px; font-weight: 750; }

.workspace { min-height: 0; display: grid; grid-template-columns: 340px minmax(430px,1fr) 360px; }
.editor-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); background: var(--ui-panel); }
.content-panel { border-right: 1px solid var(--ui-line); }
.style-panel { border-left: 1px solid var(--ui-line); }
.panel-heading { min-height: 70px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); background: #faf9f7; }
.panel-heading > span { min-width: 42px; color: var(--ui-accent); font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.panel-heading h1 { margin: 0; font-family: var(--font-serif); font-size: 19px; }
.panel-heading p { margin: 2px 0 0; color: var(--ui-muted); font-size: 12px; }
.panel-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; scrollbar-gutter: stable; }
.editor-card { margin-bottom: 14px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-card); box-shadow: 0 1px 0 rgba(40,50,54,.03); }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-title h2 { margin: 0; font-size: 14px; }
.card-title p { margin: 3px 0 0; color: var(--ui-muted); font-size: 10px; line-height: 1.45; }
.card-title > span { color: var(--ui-accent); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.field { min-width: 0; display: grid; gap: 5px; margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field > span,.range-field > span { color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.field input,.field textarea,.field select { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 13px; }
.field textarea { resize: vertical; line-height: 1.55; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.image-control { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: center; gap: 12px; }
.upload-preview { width: 82px; aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--ui-line-strong); border-radius: 7px; background: #eef0f0; color: var(--ui-muted); font-size: 10px; }
.upload-preview.logo { aspect-ratio: 1; padding: 9px; }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview.logo img { object-fit: contain; }
.image-control b { font-size: 12px; }
.image-control p { margin: 3px 0 8px; color: var(--ui-muted); font-size: 10px; line-height: 1.45; }
.inline-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.theme-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.theme-button { min-width: 0; min-height: 80px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; }
.theme-button.active { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.theme-swatch { width: 38px; height: 56px; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; background: linear-gradient(145deg,var(--a) 0 52%,var(--b) 52% 72%,var(--c) 72%); }
.theme-button b { display: block; font-size: 11px; line-height: 1.35; }
.theme-button small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 9px; line-height: 1.3; }
.orientation-control { display: grid; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.orientation-control > span { color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.orientation-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.orientation-switch button { min-height: 38px; border: 1px solid var(--ui-line); border-right: 0; background: #fff; cursor: pointer; font-size: 13px; font-weight: 800; }
.orientation-switch button:first-child { border-radius: 6px 0 0 6px; }
.orientation-switch button:last-child { border-right: 1px solid var(--ui-line); border-radius: 0 6px 6px 0; }
.orientation-switch button.active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.color-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.color-field { min-width: 0; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; }
.color-field > span { font-size: 11px; font-weight: 750; }
.color-field .clr-field { width: 100%; }
.color-field input { width: 100%; min-width: 0; height: 32px; border: 0; background: transparent; }
.check-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.check-row label,.check-field { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 12px; font-weight: 700; }
.check-field { margin-top: 8px; }
.check-row input,.check-field input { accent-color: var(--ui-accent); }
.preset-sticker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.preset-sticker-grid button { min-height: 34px; padding: 5px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; cursor: pointer; font-size: 9px; font-weight: 800; }
.sticker-list { display: grid; gap: 6px; }
.sticker-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; cursor: grab; }
.sticker-row.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.sticker-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sticker-row-actions { display: flex; gap: 3px; }
.sticker-row-actions button { width: 26px; height: 26px; border: 1px solid var(--ui-line); border-radius: 4px; background: #fff; cursor: pointer; font-size: 11px; }
.sticker-editor { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.sticker-editor-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 8px; }
.sticker-editor-actions button { min-height: 32px; border: 1px solid var(--ui-line); border-radius: 4px; background: #fff; cursor: pointer; font-size: 10px; }
.empty-note { margin: 4px 0; color: var(--ui-muted); font-size: 11px; }
.export-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }

.preview-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px minmax(0,1fr); background: #d6d9d9; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 11px; border-bottom: 1px solid var(--ui-line); background: #f5f4f2; }
.preview-toolbar > div { display: flex; align-items: center; gap: 9px; }
.preview-toolbar strong { font-size: 13px; }
.preview-toolbar #save-state { color: var(--ui-muted); font-size: 11px; }
.preview-actions { display: flex; gap: 5px; }
.preview-actions button { min-height: 34px; padding: 0 10px; font-size: 12px; }
.preview-actions button.active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.preview-viewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.preview-stage { position: relative; margin: 28px auto; }

.badge-canvas { --badge-surface:#f3f1eb; --badge-ink:#253036; --badge-accent:#647882; --badge-muted:#7b8588; --badge-line:#b8c0c1; --badge-status:#9a7559; position: relative; isolation: isolate; overflow: hidden; width: 640px; height: 1000px; flex-shrink: 0; background: var(--badge-surface); color: var(--badge-ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.45; transform-origin: top left; box-shadow: 0 12px 30px rgba(22,29,32,.25); user-select: none; }
.badge-canvas[data-mode="landscape"] { width: 1000px; height: 640px; }
.badge-page { position: absolute; inset: 0; overflow: hidden; }
.badge-page * { box-sizing: border-box; }
.badge-page img { display: block; }
.badge-photo { overflow: hidden; background: color-mix(in srgb,var(--badge-line) 45%,var(--badge-surface)); }
.badge-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge-logo img { width: 100%; height: 100%; object-fit: contain; }
.badge-logo-placeholder { display: grid; place-items: center; width: 100%; height: 100%; border: 1px dashed var(--badge-line); color: var(--badge-muted); font: 700 16px/1 var(--font-mono); }
.badge-name { margin: 0; overflow-wrap: anywhere; line-height: 1.12; }
.badge-role,.badge-dept,.badge-tagline,.badge-valid { overflow-wrap: anywhere; }
.fictional-mark { font: 800 16px/1.2 var(--font-mono); letter-spacing: .12em; }
.badge-canvas.is-exporting .badge-clickable { pointer-events: none; }
.badge-canvas.stickers-only .badge-page { visibility: hidden; }
.badge-canvas.stickers-only { background: transparent; box-shadow: none; }

/* 01 历史档案识别卡 */
.vintage-page { padding:42px 46px 38px 78px; border:10px double var(--badge-line); background:linear-gradient(rgba(255,255,255,.15),rgba(25,22,18,.025)),repeating-linear-gradient(0deg,transparent 0 10px,rgba(47,45,40,.016) 10px 11px),var(--badge-surface); font-family:var(--font-serif); }
.vt-side-note { position:absolute; left:24px; top:160px; bottom:92px; padding-right:10px; border-right:2px solid var(--badge-ink); writing-mode:vertical-rl; transform:rotate(180deg); font:700 16px/1.25 var(--font-mono); letter-spacing:.09em; }
.vt-head { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start; padding-bottom:18px; border-bottom:2px solid var(--badge-ink); }
.vt-head > small { grid-column:1/-1; font:700 16px var(--font-mono); letter-spacing:.16em; }
.vt-head h2 { margin:0; font-size:32px; letter-spacing:.1em; text-align:center; }
.vt-head div span { display:block; text-align:center; font:700 16px var(--font-mono); letter-spacing:.12em; }
.vt-head time { padding-top:8px; border-bottom:1px solid var(--badge-ink); font:700 18px var(--font-mono); }
.vt-primary { margin-top:18px; }
.vt-line { display:grid; grid-template-columns:102px 1fr; gap:14px; align-items:end; min-height:44px; border-bottom:1px solid var(--badge-ink); }
.vt-line span { font:700 16px var(--font-mono); letter-spacing:.07em; }
.vt-line b { min-width:0; font-size:20px; }
.vt-name { font-size:36px !important; font-weight:500; }
.vt-body { display:grid; grid-template-rows:300px 1fr; gap:18px; margin-top:18px; }
.vt-portrait-block { height:100%; display:grid; grid-template-rows:260px auto; align-content:start; justify-items:center; gap:12px; }
.vt-photo-wrap { width:72%; height:260px; margin:0 auto; padding:8px; border:2px solid var(--badge-ink); }
.vt-photo { width:100%; height:100%; }
.vt-photo-caption { width:100%; margin:0; color:var(--badge-muted); text-align:center; font:700 16px/1.4 var(--font-mono); }
.vt-auth { position:relative; padding:18px 12px 0; border-top:1px solid var(--badge-line); font:700 18px/1.5 var(--font-mono); letter-spacing:.035em; }
.vt-auth p { max-width:400px; margin:10px 0; text-transform:uppercase; }
.vt-signature { margin:12px 0 0 auto; width:250px; padding-bottom:4px; border-bottom:2px solid var(--badge-ink); text-align:center; font:italic 30px/1.2 var(--font-serif); }
.vt-signature small { display:block; margin-top:4px; font:700 16px/1.25 var(--font-mono); letter-spacing:.1em; }
.vt-foot { position:absolute; left:78px; right:46px; bottom:24px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px; color:var(--badge-muted); font:700 16px/1.35 var(--font-mono); }
.vt-foot b { color:var(--badge-ink); }
.badge-canvas[data-mode="portrait"] .vintage-page { padding-right:78px; }
.badge-canvas[data-mode="portrait"] .vt-head { position:relative; display:block; }
.badge-canvas[data-mode="portrait"] .vt-head > small { display:block; padding-right:150px; line-height:1.2; white-space:nowrap; }
.badge-canvas[data-mode="portrait"] .vt-head > div { width:100%; margin-top:18px; padding-inline:56px; text-align:center; }
.badge-canvas[data-mode="portrait"] .vt-head time { position:absolute; right:0; top:0; padding-top:0; font-size:16px; line-height:1.2; white-space:nowrap; }
.badge-canvas[data-mode="portrait"] .vt-line { position:relative; grid-template-columns:1fr; }
.badge-canvas[data-mode="portrait"] .vt-line span { position:absolute; left:0; bottom:6px; }
.badge-canvas[data-mode="portrait"] .vt-line b { width:100%; padding-inline:104px; text-align:center; }
.badge-canvas[data-mode="portrait"] .vt-foot { right:78px; }
.badge-canvas[data-mode="landscape"] .vintage-page { padding:32px 46px 30px 80px; }
.badge-canvas[data-mode="landscape"] .vt-side-note { top:110px; bottom:68px; }
.badge-canvas[data-mode="landscape"] .vt-head { grid-template-columns:210px 1fr 190px; align-items:center; }
.badge-canvas[data-mode="landscape"] .vt-head > small { grid-column:auto; }
.badge-canvas[data-mode="landscape"] .vt-primary { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:16px; margin-top:14px; }
.badge-canvas[data-mode="landscape"] .vt-line { grid-template-columns:76px 1fr; min-height:40px; }
.badge-canvas[data-mode="landscape"] .vt-name { font-size:30px !important; }
.badge-canvas[data-mode="landscape"] .vt-body { grid-template-columns:310px 1fr; grid-template-rows:348px; gap:34px; margin-top:18px; }
.badge-canvas[data-mode="landscape"] .vt-portrait-block { grid-template-rows:300px auto; gap:10px; }
.badge-canvas[data-mode="landscape"] .vt-photo-wrap { width:100%; height:300px; }
.badge-canvas[data-mode="landscape"] .vt-auth { padding:32px 24px; border:0; border-left:1px solid var(--badge-line); }
.badge-canvas[data-mode="landscape"] .vt-foot { left:80px; right:46px; bottom:18px; }

/* 02 极简留白工牌 */
.corporate-page { padding:52px; display:grid; grid-template-rows:auto 1fr auto; gap:34px; border:3px solid var(--badge-line); background:var(--badge-surface); }
.corporate-page::before { content:""; position:absolute; left:52px; right:52px; top:30px; height:6px; background:var(--badge-accent); }
.cp-head { display:flex; justify-content:space-between; align-items:start; gap:24px; padding-bottom:22px; border-bottom:2px solid var(--badge-line); }
.cp-logo { width:84px; height:56px; }
.cp-org b { display:block; font:700 19px/1.35 var(--font-mono); letter-spacing:.07em; }
.cp-org span { color:var(--badge-muted); font-size:16px; }
.cp-main { min-height:0; display:grid; grid-template-rows:1fr auto; gap:32px; }
.cp-photo { width:292px; height:370px; align-self:center; justify-self:center; }
.cp-person { align-self:end; padding-left:22px; border-left:6px solid var(--badge-accent); }
.cp-type { display:block; color:var(--badge-muted); font:700 16px/1.35 var(--font-mono); letter-spacing:.12em; }
.cp-person .badge-name { margin-top:8px; font-size:56px; font-weight:500; letter-spacing:-.035em; }
.cp-person .name-en { color:var(--badge-muted); font:700 17px/1.4 var(--font-mono); }
.cp-person .badge-role { margin-top:14px; font-size:22px; font-weight:800; }
.cp-person .badge-dept { color:var(--badge-muted); font-size:18px; }
.cp-foot { display:grid; grid-template-columns:1fr auto; gap:16px 28px; padding-top:22px; border-top:2px solid var(--badge-line); font:700 16px/1.4 var(--font-mono); }
.cp-location span,.cp-location small,.cp-id span,.cp-id b { display:block; }
.cp-location small,.cp-id span { color:var(--badge-muted); }
.cp-foot time { color:var(--badge-status); text-align:right; }
.badge-canvas[data-mode="portrait"] .cp-foot time { text-align:left; }
.cp-foot .fictional-mark { align-self:end; }
.badge-canvas[data-mode="landscape"] .corporate-page { padding:46px 54px; grid-template-rows:auto 1fr auto; gap:26px; }
.badge-canvas[data-mode="landscape"] .corporate-page::before { left:54px; right:54px; top:24px; }
.badge-canvas[data-mode="landscape"] .cp-main { grid-template-columns:340px 1fr; grid-template-rows:1fr; gap:58px; align-items:center; }
.badge-canvas[data-mode="landscape"] .cp-photo { width:300px; height:340px; }
.badge-canvas[data-mode="landscape"] .cp-person { align-self:center; }
.badge-canvas[data-mode="landscape"] .cp-person .badge-name { font-size:62px; }
.badge-canvas[data-mode="landscape"] .cp-foot { grid-template-columns:1.4fr 1fr auto auto; align-items:end; }

/* 03 编辑工作室证件 */
.studio-page { padding:46px 50px 40px; display:grid; grid-template-rows:auto auto 1fr auto; gap:22px; border:12px solid color-mix(in srgb,var(--badge-surface) 74%,white); background:var(--badge-surface); }
.st-head { display:flex; justify-content:space-between; align-items:start; gap:24px; }
.st-wordmark { font:950 66px/.68 var(--font-ui); letter-spacing:-.09em; }
.st-wordmark b { color:var(--badge-accent); }
.st-brand-mark { display:flex; justify-content:flex-end; align-items:flex-start; }
.st-head .badge-logo { width:112px; height:76px; }
.st-rule { display:flex; justify-content:space-between; gap:22px; padding:12px 0; border-top:5px dashed var(--badge-ink); border-bottom:2px solid var(--badge-line); font:700 16px/1.35 var(--font-mono); letter-spacing:.1em; }
.st-main { min-height:0; display:grid; grid-template-rows:380px 1fr; gap:28px; }
.st-photo { width:320px; height:380px; justify-self:center; box-shadow:12px 12px 0 color-mix(in srgb,var(--badge-accent) 24%,transparent); }
.st-copy { display:grid; gap:14px; align-content:start; }
.st-copy > div { position:relative; display:grid; grid-template-columns:1fr; align-items:end; min-height:46px; border-bottom:4px dashed var(--badge-ink); }
.st-copy span { position:absolute; left:0; bottom:6px; font:700 16px/1.35 var(--font-mono); }
.st-copy .badge-name { width:100%; padding-inline:112px; box-sizing:border-box; text-align:center; font-size:40px; font-weight:600; }
.st-copy > div > b,.st-copy > div > p { min-width:0; width:100%; margin:0; padding-inline:112px; box-sizing:border-box; text-align:center; font-size:19px; }
.st-copy > .st-standalone-tagline { min-width:0; margin:0; padding-inline:24px; text-align:center; color:var(--badge-muted); font-size:16px; line-height:1.35; }
.st-foot { display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:24px; padding-top:16px; border-top:2px solid var(--badge-line); font:700 16px/1.35 var(--font-mono); }
.st-foot b { color:var(--badge-status); text-align:center; }
.badge-canvas[data-mode="landscape"] .studio-page { padding:38px 46px 32px; gap:16px; }
.badge-canvas[data-mode="landscape"] .st-wordmark { font-size:54px; }
.badge-canvas[data-mode="landscape"] .st-main { grid-template-columns:310px 1fr; grid-template-rows:1fr; gap:42px; align-items:center; }
.badge-canvas[data-mode="landscape"] .st-photo { width:270px; height:310px; }
.badge-canvas[data-mode="landscape"] .st-copy .badge-name { font-size:44px; }

/* 04 暗色机能身份牌 */
.industrial-page { border:0; border-radius:0; background:radial-gradient(circle at 52% 40%,color-mix(in srgb,var(--badge-line) 12%,transparent),transparent 44%),linear-gradient(115deg,color-mix(in srgb,var(--badge-surface) 92%,white),var(--badge-surface) 42%,color-mix(in srgb,var(--badge-surface) 88%,black)); font-family:var(--font-ui); }
.industrial-page::after { display:none; }
.in-slot { display:none; }
.in-head { position:absolute; z-index:2; left:34px; right:34px; top:34px; display:flex; justify-content:space-between; align-items:flex-start; gap:32px; }
.in-head b,.in-head span { display:block; max-width:150px; color:var(--badge-ink); font-size:16px; font-weight:850; line-height:1.05; text-transform:uppercase; }
.in-head b { width:90px; max-width:90px; }
.in-head span { max-width:130px; text-align:right; }
.in-main { position:absolute; inset:0; }
.in-copy { position:absolute; z-index:2; left:34px; top:196px; width:300px; }
.in-name { color:var(--badge-ink); font:500 94px/.86 "OC Bodoni Moda",serif; letter-spacing:-.06em; }
.in-name span { display:block; white-space:nowrap; overflow-wrap:normal; }
.in-name span.is-long { font-size:60px; line-height:1; }
.in-name span.is-very-long { font-size:48px; line-height:1.04; }
.in-cn-name { margin-top:12px; color:var(--badge-ink); font:600 32px/1.25 "OC Noto Serif SC","Source Han Serif SC","Noto Serif SC",serif; letter-spacing:.04em; }
.in-role { max-width:245px; margin-top:22px; color:var(--badge-ink); font-size:18px; font-weight:900; line-height:1.15; text-transform:uppercase; }
.in-dept { max-width:245px; margin-top:4px; color:var(--badge-ink); font-size:16px; font-weight:800; line-height:1.2; }
.in-statement { width:150px; margin:70px 0 0; color:var(--badge-status); font:850 16px/1.4 var(--font-mono); text-transform:uppercase; overflow-wrap:anywhere; }
.in-photo { position:absolute; z-index:1; right:34px; top:360px; width:270px; height:500px; background:color-mix(in srgb,var(--badge-surface) 82%,white); }
.in-photo .badge-logo-placeholder { color:var(--badge-muted); border-color:var(--badge-line); }
.in-serial { position:absolute; z-index:2; right:36px; top:198px; color:var(--badge-status); font:500 50px/1 var(--font-serif); letter-spacing:.035em; }
.in-accent { position:absolute; z-index:3; right:0; bottom:78px; width:38px; height:102px; background:var(--badge-status); }
.in-foot { position:absolute; z-index:4; left:34px; right:34px; bottom:32px; display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:20px; color:var(--badge-ink); font-size:16px; font-weight:850; line-height:1.2; }
.in-foot b { font-size:16px; }
.in-foot > span:not(.fictional-mark) { text-align:center; }
.in-foot .fictional-mark { color:var(--badge-muted); text-align:right; }
.badge-canvas[data-mode="landscape"] .industrial-page { border-radius:0; }
.badge-canvas[data-mode="landscape"] .in-head { left:48px; right:48px; top:28px; }
.badge-canvas[data-mode="landscape"] .in-head b { width:190px; max-width:190px; }
.badge-canvas[data-mode="landscape"] .in-copy { left:50px; top:98px; width:470px; }
.badge-canvas[data-mode="landscape"] .in-name { font-size:86px; line-height:.84; }
.badge-canvas[data-mode="landscape"] .in-name span.is-long { font-size:86px; line-height:inherit; }
.badge-canvas[data-mode="landscape"] .in-name span.is-very-long { font-size:78px; line-height:.9; }
.badge-canvas[data-mode="landscape"] .in-cn-name { margin-top:8px; font-size:28px; }
.badge-canvas[data-mode="landscape"] .in-role { margin-top:14px; }
.badge-canvas[data-mode="landscape"] .in-statement { width:180px; margin-top:38px; }
.badge-canvas[data-mode="landscape"] .in-photo { right:48px; top:86px; width:338px; height:448px; }
.badge-canvas[data-mode="landscape"] .in-serial { right:400px; top:94px; font-size:42px; }
.badge-canvas[data-mode="landscape"] .in-accent { bottom:64px; width:34px; height:92px; }
.badge-canvas[data-mode="landscape"] .in-foot { left:50px; right:48px; bottom:26px; grid-template-columns:1fr 1fr auto; }

/* 05 机密特勤档案证 */
.lab-page { padding:40px 46px 32px; display:grid; grid-template-rows:auto 1fr auto; gap:18px; border:7px solid var(--badge-ink); background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--badge-line) 13%,transparent) 31px 32px),var(--badge-surface); font-family:var(--font-mono); }
.lb-head { display:flex; justify-content:space-between; gap:22px; padding-bottom:18px; border-bottom:3px solid var(--badge-ink); }
.lb-head > div { display:grid; grid-template-columns:58px 1fr; gap:4px 14px; }
.lb-head .badge-logo { grid-row:1/3; width:58px; height:58px; }
.lb-head b { font-size:21px; }
.lb-head small { color:var(--badge-muted); font-size:16px; }
.lb-head > span { align-self:start; padding:10px 14px; background:var(--badge-ink); color:var(--badge-surface); font-weight:900; font-size:16px; }
.lb-main { min-height:0; display:grid; grid-template-rows:320px auto auto; align-content:start; gap:28px; }
.lb-photo { position:relative; width:286px; height:320px; margin:0; justify-self:center; align-self:center; padding:9px; border:3px solid var(--badge-line); background:var(--badge-surface); box-shadow:10px 10px 0 color-mix(in srgb,var(--badge-line) 34%,transparent); }
.lb-photo > .badge-photo { width:100%; height:100%; }
.lb-photo > small { position:absolute; left:16px; bottom:-16px; padding:6px 10px; background:var(--badge-ink); color:var(--badge-surface); font-size:16px; }
.lb-person { display:grid; justify-items:center; gap:6px; text-align:center; }
.lb-person .badge-name { font-size:36px; }
.lb-person strong { display:block; color:var(--badge-accent); font-size:19px; line-height:1.35; }
.lb-department { display:inline-block; margin-top:4px; padding:7px 14px; border:2px solid var(--badge-line); border-radius:5px; color:var(--badge-ink); font-size:16px; }
.lb-grid { display:grid; grid-template-columns:1fr; align-self:start; border:2px solid var(--badge-line); border-radius:6px; overflow:hidden; }
.lb-grid div { min-height:48px; padding:8px 12px; display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:18px; border-bottom:1px solid var(--badge-line); }
.lb-grid div:last-child { border-bottom:0; }
.lb-grid span,.lb-grid b { display:block; font-size:16px; }
.lb-grid span { color:var(--badge-muted); white-space:nowrap; }
.lb-grid b { min-width:0; text-align:right; white-space:nowrap; word-break:keep-all; }
.lb-grid div:last-child { color:var(--badge-accent); }
.lb-foot { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-top:14px; border-top:2px solid var(--badge-line); font-size:16px; }
.lb-foot .fictional-mark { color:var(--badge-accent); }
.badge-canvas[data-mode="landscape"] .lab-page { padding:38px 46px 30px; gap:18px; }
.badge-canvas[data-mode="landscape"] .lb-main { grid-template-columns:330px 1fr; grid-template-rows:auto 1fr; gap:16px 34px; }
.badge-canvas[data-mode="landscape"] .lb-photo { grid-row:1/3; width:310px; height:370px; }
.badge-canvas[data-mode="landscape"] .lb-person { align-self:end; justify-items:start; text-align:left; }
.badge-canvas[data-mode="landscape"] .lb-person .badge-name { font-size:40px; }
.badge-canvas[data-mode="landscape"] .lb-grid { grid-template-columns:1fr 1fr; grid-template-areas:"dossier recruited" "status threat" "division division"; }
.badge-canvas[data-mode="landscape"] .lb-grid div { min-height:58px; border-right:0; }
.badge-canvas[data-mode="landscape"] .lb-grid div:nth-child(1) { grid-area:dossier; border-right:1px solid var(--badge-line); }
.badge-canvas[data-mode="landscape"] .lb-grid div:nth-child(2) { grid-area:recruited; }
.badge-canvas[data-mode="landscape"] .lb-grid div:nth-child(3) { grid-area:status; border-right:1px solid var(--badge-line); }
.badge-canvas[data-mode="landscape"] .lb-grid div:nth-child(4) { grid-area:division; border-bottom:0; }
.badge-canvas[data-mode="landscape"] .lb-grid div:nth-child(5) { grid-area:threat; border-bottom:1px solid var(--badge-line); }

/* 06 像素设计工牌 */
.visitor-page { display:grid; grid-template-rows:154px minmax(0,1fr); border:8px solid var(--badge-ink); background:repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--badge-line) 8%,transparent) 23px 24px),var(--badge-surface); font-family:"OC Fusion Pixel","PoxiaoPixel",monospace; font-weight:400; image-rendering:pixelated; }
.visitor-page::before { content:""; position:absolute; z-index:5; inset:0; border:2px solid color-mix(in srgb,var(--badge-surface) 55%,transparent); pointer-events:none; }
.vs-band { position:relative; z-index:1; display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:18px; padding:26px 34px; border-bottom:8px solid var(--badge-accent); background:var(--badge-ink); color:var(--badge-surface); }
.vs-logo { width:68px; height:68px; }
.vs-logo .badge-logo-placeholder { border:3px solid var(--badge-accent); color:var(--badge-surface); font-family:"OC Fusion Pixel","PoxiaoPixel",monospace; }
.vs-brand-copy { min-width:0; }
.vs-brand-copy h2 { margin:0; font:400 32px/1.15 "OC Fusion Pixel","PoxiaoPixel",monospace; letter-spacing:.02em; overflow-wrap:anywhere; }
.vs-brand-copy small { display:block; margin-top:7px; color:color-mix(in srgb,var(--badge-accent) 78%,var(--badge-surface)); font:400 18px/1.2 "OC Fusion Pixel","PoxiaoPixel",monospace; letter-spacing:.08em; }
.vs-signal { display:flex; align-items:center; gap:12px; }
.vs-signal i { display:block; width:18px; height:18px; background:var(--badge-accent); }
.vs-signal i:nth-child(2) { background:var(--badge-surface); }
.vs-signal i:nth-child(3) { background:var(--badge-line); }
.vs-main { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) 252px; }
.vs-identity { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 248px; align-items:center; gap:26px; padding:32px 34px 26px; }
.vs-person { min-width:0; align-self:center; }
.vs-person .badge-name { font:400 52px/1.18 "OC Fusion Pixel","PoxiaoPixel",monospace; letter-spacing:.05em; }
.vs-name-en { margin-top:6px; color:var(--badge-accent); font-size:22px; line-height:1.3; letter-spacing:.08em; overflow-wrap:anywhere; }
.vs-role { min-height:58px; margin-top:28px; padding:12px 14px; display:flex; align-items:center; gap:12px; background:color-mix(in srgb,var(--badge-accent) 22%,var(--badge-surface)); font-size:19px; line-height:1.35; }
.vs-role i { flex:0 0 auto; width:22px; height:30px; background:var(--badge-accent); }
.vs-role b { min-width:0; font-weight:400; overflow-wrap:anywhere; }
.vs-dept { margin-top:22px; padding:0 4px 18px; border-bottom:4px dashed var(--badge-accent); }
.vs-dept span,.vs-id span { display:block; color:var(--badge-muted); font-size:16px; line-height:1.25; letter-spacing:.08em; }
.vs-dept b { display:block; margin-top:5px; font-size:21px; font-weight:400; line-height:1.35; overflow-wrap:anywhere; }
.vs-id { margin-top:18px; padding-inline:4px; }
.vs-id b { display:block; margin-top:4px; color:var(--badge-ink); font-size:32px; font-weight:400; line-height:1.25; overflow-wrap:anywhere; }
.vs-portrait { position:relative; justify-self:end; width:248px; height:340px; padding:8px; border:6px solid var(--badge-ink); background:var(--badge-accent); box-shadow:8px 8px 0 var(--badge-line); }
.vs-photo { width:100%; height:100%; background:color-mix(in srgb,var(--badge-accent) 45%,var(--badge-surface)); }
.vs-photo img { image-rendering:pixelated; }
.vs-lower { min-height:0; display:grid; grid-template-columns:190px minmax(0,1fr); border-top:8px solid var(--badge-ink); }
.vs-dates { display:grid; align-content:center; gap:22px; padding:24px 26px; background:var(--badge-ink); color:var(--badge-surface); }
.vs-dates div + div { padding-top:18px; border-top:4px solid var(--badge-accent); }
.vs-dates span,.vs-level > span,.vs-note > span { display:block; font-size:16px; line-height:1.2; letter-spacing:.08em; }
.vs-dates b { display:block; margin-top:6px; font-size:20px; font-weight:400; line-height:1.35; white-space:nowrap; }
.vs-access { min-width:0; display:grid; grid-template-rows:auto 1fr; gap:18px; padding:24px 28px; background:color-mix(in srgb,var(--badge-accent) 34%,var(--badge-surface)); }
.vs-level { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:18px; padding-bottom:16px; border-bottom:4px solid var(--badge-ink); }
.vs-level > div { min-width:0; }
.vs-level > div + div { padding-left:18px; border-left:3px solid var(--badge-status); }
.vs-level span { display:block; color:var(--badge-muted); font-size:16px; line-height:1.2; letter-spacing:.08em; }
.vs-level b { display:block; min-width:0; margin-top:6px; font-size:28px; font-weight:400; line-height:1.15; overflow-wrap:anywhere; }
.vs-note { min-width:0; align-self:start; }
.vs-note p { margin:6px 0 0; font-size:18px; line-height:1.45; overflow-wrap:anywhere; }
.vs-foot { position:absolute; z-index:6; right:18px; bottom:14px; color:var(--badge-muted); font-size:16px; }
.badge-canvas[data-mode="landscape"] .visitor-page { grid-template-rows:112px minmax(0,1fr); }
.badge-canvas[data-mode="landscape"] .vs-band { grid-template-columns:58px minmax(0,1fr) auto; padding:18px 32px; border-bottom-width:6px; }
.badge-canvas[data-mode="landscape"] .vs-logo { width:54px; height:54px; }
.badge-canvas[data-mode="landscape"] .vs-brand-copy h2 { font-size:28px; }
.badge-canvas[data-mode="landscape"] .vs-brand-copy small { margin-top:3px; font-size:16px; }
.badge-canvas[data-mode="landscape"] .vs-main { grid-template-rows:minmax(0,1fr) 166px; }
.badge-canvas[data-mode="landscape"] .vs-identity { grid-template-columns:minmax(0,1fr) 270px; gap:42px; padding:22px 38px 18px; }
.badge-canvas[data-mode="landscape"] .vs-person { display:grid; grid-template-columns:1fr 1fr; column-gap:28px; align-items:start; }
.badge-canvas[data-mode="landscape"] .vs-person .badge-name,.badge-canvas[data-mode="landscape"] .vs-name-en { grid-column:1/3; }
.badge-canvas[data-mode="landscape"] .vs-person .badge-name { font-size:48px; }
.badge-canvas[data-mode="landscape"] .vs-role { grid-column:1/3; min-height:52px; margin-top:16px; }
.badge-canvas[data-mode="landscape"] .vs-dept { margin-top:18px; }
.badge-canvas[data-mode="landscape"] .vs-id { margin-top:18px; }
.badge-canvas[data-mode="landscape"] .vs-id b { font-size:28px; }
.badge-canvas[data-mode="landscape"] .vs-portrait { width:270px; height:280px; }
.badge-canvas[data-mode="landscape"] .vs-lower { grid-template-columns:330px minmax(0,1fr); border-top-width:6px; }
.badge-canvas[data-mode="landscape"] .vs-dates { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:16px; padding:18px 24px; }
.badge-canvas[data-mode="landscape"] .vs-dates div + div { min-width:0; padding:0 0 0 16px; border-top:0; border-left:4px solid var(--badge-accent); }
.badge-canvas[data-mode="landscape"] .vs-access { grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:28px; padding:18px 28px; }
.badge-canvas[data-mode="landscape"] .vs-level { align-self:center; gap:14px; padding:0 24px 0 0; border:0; border-right:4px solid var(--badge-ink); }
.badge-canvas[data-mode="landscape"] .vs-level > div + div { padding-left:14px; }
.badge-canvas[data-mode="landscape"] .vs-level b { font-size:24px; }
.badge-canvas[data-mode="landscape"] .vs-note { align-self:center; }

/* 贴纸 */
.sticker-layer { position:absolute; inset:0; z-index:20; overflow:hidden; pointer-events:none; }
.canvas-sticker { --x:50%; --y:20%; --w:160px; --h:54px; --r:0deg; position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); transform:translate(-50%,-50%) rotate(var(--r)); pointer-events:auto; touch-action:none; cursor:move; }
.canvas-sticker.is-hidden { display:none; }
.sticker-body { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; }
.image-sticker .sticker-body img { width:100%; height:100%; object-fit:contain; }
.image-sticker .sticker-body.fit-cover img { object-fit:cover; }
.image-sticker .sticker-body.fit-stretch img { object-fit:fill; }
.canvas-sticker.is-selected:not(.is-locked) { outline:3px solid #59666d; outline-offset:3px; }
.sticker-handle { position:absolute; z-index:3; width:24px; height:24px; border:3px solid #fff; border-radius:50%; background:#59666d; box-shadow:0 0 0 1px #293239; }
.resize-handle { right:-14px; bottom:-14px; cursor:nwse-resize; }
.rotate-handle { left:50%; top:-42px; transform:translateX(-50%); cursor:grab; }
.rotate-handle::after { content:""; position:absolute; left:10px; top:22px; width:2px; height:18px; background:#59666d; }
.canvas-sticker:not(.is-selected) .sticker-handle,.canvas-sticker.is-locked .sticker-handle,.badge-canvas.is-exporting .sticker-handle { display:none; }
.badge-canvas.is-exporting .canvas-sticker { outline:0 !important; }

/* 弹窗 / 教程 / 提示 */
.mobile-resizer,.mobile-main-tabs { display:none; }
.crop-modal,.tour-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
.crop-modal[hidden],.tour-overlay[hidden] { display:none !important; }
.modal-backdrop,.tour-blocker { position:absolute; inset:0; border:0; background:rgba(28,33,36,.72); }
.crop-dialog { position:relative; width:min(620px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:18px; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-card); }
.crop-dialog header,.crop-dialog footer,.tour-card header,.tour-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.crop-dialog header h2,.tour-card h2 { margin:2px 0 0; font-family:var(--font-serif); font-size:20px; }
.crop-dialog header small { color:var(--ui-accent); font-size:10px; font-weight:850; letter-spacing:.12em; }
.crop-dialog header > button,.tour-card header > button { width:38px; height:38px; border:1px solid var(--ui-line); border-radius:5px; background:#fff; cursor:pointer; font-size:22px; }
.crop-stage { width:100%; margin:16px 0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; touch-action:none; }
.crop-stage canvas { display:block; width:auto; height:auto; max-width:100%; max-height:52dvh; background:#272c2f; object-fit:contain; touch-action:none; }
.range-field { display:grid; grid-template-columns:50px 1fr; align-items:center; gap:10px; }
.range-field input { width:100%; accent-color:var(--ui-accent); }
.crop-dialog > p { color:var(--ui-muted); font-size:12px; line-height:1.5; }
.crop-dialog footer { justify-content:flex-end; margin-top:14px; }
.tour-card { position:relative; width:min(380px,calc(100vw - 24px)); padding:20px; border-radius:9px; background:#fff; }
.tour-card header span { color:var(--ui-accent); font-size:12px; font-weight:850; }
.tour-card h2 { margin-top:18px; }
.tour-card p { margin:8px 0 20px; color:var(--ui-muted); font-size:13px; line-height:1.65; }
.tour-card footer { justify-content:flex-end; }
.toast { position:fixed; left:50%; bottom:24px; z-index:140; max-width:calc(100vw - 32px); padding:10px 14px; border-radius:6px; background:var(--ui-accent-dark); color:#fff; font-size:13px; opacity:0; pointer-events:none; transform:translate(-50%,16px); transition:.16s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:1280px) {
  .workspace { grid-template-columns:310px minmax(390px,1fr) 330px; }
  .brand { min-width:194px; }
  .brand-copy small { display:none; }
  .top-actions { gap:4px; }
  .button { padding-inline:10px; }
}
@media (max-width:900px) {
  :root { --topbar-height:62px; }
  .topbar { gap:8px; padding:0 10px; }
  .brand { min-width:44px; }
  .brand-copy,.project-field,.desktop-action { display:none; }
  .brand-mark { width:40px; height:40px; }
  .top-actions { width:calc(100% - 50px); justify-content:flex-end; gap:6px; }
  .top-actions .button { min-height:40px; padding:0 12px; }
  .workspace { --mobile-preview-height:42%; height:auto; min-height:0; grid-template-columns:1fr; grid-template-rows:var(--mobile-preview-height) 20px 48px minmax(0,1fr); grid-template-areas:"preview" "resizer" "tabs" "panel"; }
  .preview-panel { grid-area:preview; grid-template-rows:42px minmax(0,1fr); border-bottom:0; }
  .preview-toolbar { padding:0 8px; }
  .preview-viewport { overflow:auto; }
  .preview-stage { margin:0 auto; }
  .mobile-resizer { grid-area:resizer; display:grid; place-items:center; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); background:#f1f1ef; cursor:row-resize; touch-action:none; user-select:none; z-index:12; }
  .mobile-resizer span { width:112px; height:5px; border-radius:4px; background:var(--ui-line-strong); pointer-events:none; }
  .mobile-main-tabs { grid-area:tabs; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); background:#f7f6f3; z-index:14; }
  .mobile-main-tabs button { border:0; border-right:1px solid var(--ui-line); background:transparent; font-size:13px; font-weight:850; }
  .mobile-main-tabs button:last-child { border-right:0; }
  .mobile-main-tabs button.active { background:var(--ui-accent-soft); box-shadow:inset 0 -3px var(--ui-accent); }
  .editor-panel { grid-area:panel; min-height:0; border:0; display:grid; grid-template-rows:minmax(0,1fr); }
  .panel-heading { display:none; }
  .panel-scroll { padding:12px 10px calc(20px + env(safe-area-inset-bottom)); scrollbar-gutter:auto; }
  body[data-active-mobile-panel="content"] .style-panel,body[data-active-mobile-panel="style"] .content-panel { display:none; }
  .editor-card { padding:13px; }
  .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field input,.field textarea,.field select { min-height:42px; }
  .sticker-handle { width:36px; height:36px; }
  .resize-handle { right:-20px; bottom:-20px; }
  .rotate-handle { top:-52px; }
  .rotate-handle::after { left:15px; top:33px; }
  .crop-dialog { padding:14px; }
  .toast { bottom:calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width:520px) {
  .top-actions .button { padding-inline:9px; font-size:12px; }
  .field-grid { grid-template-columns:1fr; gap:0; }
  .color-grid { grid-template-columns:1fr; }
  .preset-sticker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .theme-button { grid-template-columns:34px minmax(0,1fr); padding:7px; }
  .theme-swatch { width:34px; height:52px; }
  .sticker-editor-actions { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01s !important; animation-duration:.01s !important; scroll-behavior:auto !important; } }