@font-face { font-family:'HanWangYanKai'; src:url('/invitations/assets/HanWangYanKai-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'SatsukiGendaiMincho'; src:url('/fonts/SatsukiGendaiMincho-M.woff2') format('woff2'); font-display:swap; }
:root { color-scheme: light; --accent:#680b09; --text:#342d30; --muted:#73666b; --line:#e3dddf; --workspace:#f4f1f3; --selected:#f3e8e8; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:white; color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans TC','Microsoft JhengHei',sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; } button:disabled { opacity:.35; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.topbar { position:sticky; top:0; z-index:3; min-height:72px; padding:12px 28px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:28px; background:white; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--accent); font:26px system-ui,sans-serif; white-space:nowrap; }
.brand img { display:block; width:104px; height:auto; flex:0 0 auto; }
.brand small { font:12px system-ui,sans-serif; color:var(--muted); }
.save-state[data-tone='normal'] { display:none; }
.save-state { color:var(--muted); font-size:12px; line-height:1.6; flex:1; } .save-state[data-tone='error'] { color:var(--accent); }
.top-actions,.history-actions,.draft-actions { display:flex; gap:8px; align-items:center; }
.history-actions { margin-left:auto; }
.top-actions { flex-wrap:wrap; justify-content:flex-end; }
.published-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; align-items:center; }
.top-actions button,.top-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:4px; font-family:inherit; font-size:13px; font-weight:400; line-height:1.4; letter-spacing:normal; text-align:center; text-decoration:none; white-space:nowrap; }
.top-actions a { color:var(--accent); }
.top-actions a:hover,.top-actions button:not(:disabled):hover { background:var(--selected); }
.icon-button,.text-button,.outline-button,.primary-button { min-height:40px; padding:9px 14px; border:0; border-radius:4px; background:transparent; color:var(--accent); font-size:13px; white-space:nowrap; }
.icon-button { min-width:40px; padding:6px; font-size:24px; } .outline-button { border:1px solid #bba8ac; } .primary-button { background:var(--accent); color:white; padding-inline:20px; }
button:not(:disabled):hover { background:var(--selected); } .primary-button:not(:disabled):hover { background:#872d2b; }
.app-shell { display:grid; grid-template-columns:200px 350px minmax(0,1fr); min-height:calc(100svh - 72px); }
.chapters { padding:28px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.cover-thumb iframe { border:0; width:100%; height:145px; pointer-events:none; background:var(--accent); }
.cover-thumb strong { display:block; margin-top:14px; font:17px system-ui,sans-serif; color:var(--accent); } .cover-thumb small { display:block; margin-top:6px; font-size:11px; color:var(--muted); }
.chapter-list { margin-top:32px; } .chapter { width:100%; display:flex; align-items:center; gap:12px; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; padding:17px 8px; border-radius:4px; color:var(--muted); }
.chapter span { font-size:14px; } .chapter .chapter-symbol { flex:0 0 22px; text-align:center; font:18px system-ui,sans-serif; } .chapter small { display:block; font-size:11px; margin-top:5px; line-height:1.4; color:var(--muted); } .chapter.active { color:var(--accent); background:var(--selected); border-color:transparent; }
.local-note { margin-top:auto; padding-top:60px; color:var(--accent); font:14px/1.9 system-ui,sans-serif; } .local-note span { font:11px/1.8 system-ui,sans-serif; color:var(--muted); } .template-link { font-size:11px; color:var(--muted); text-decoration:none; }
.controls { padding:34px 28px; border-right:1px solid var(--line); min-width:0; } .section-heading h1 { font:30px/1.4 system-ui,sans-serif; color:var(--accent); margin:0 0 9px; text-wrap:balance; } .section-heading p { font-size:13px; line-height:1.85; color:var(--muted); margin:0 0 28px; }
.chapter-panel[hidden] { display:none; } label { display:block; font-size:13px; color:var(--text); margin:0 0 22px; line-height:1.5; }
input:not([type]),input[type='text'],input[type='date'] { display:block; width:100%; margin-top:8px; border:1px solid var(--line); border-radius:4px; background:#fcfbfc; padding:11px 12px; color:var(--text); font-size:15px; min-height:44px; }
input:focus { border-color:var(--accent); } input[aria-invalid='true'] { border-color:var(--accent); } input[type='range'] { display:block; width:100%; margin-top:15px; accent-color:var(--accent); } input[type='radio'] { accent-color:var(--accent); }
input[data-field='dateCaption'] { font-family:"Invitation HanWang",system-ui,sans-serif; }
output { float:right; color:var(--accent); font-size:12px; } fieldset { border:0; padding:0; margin:0 0 27px; min-width:0; } legend { font-size:13px; margin-bottom:16px; padding:0; } .hint { font-size:12px; line-height:1.9; color:var(--muted); margin:0 0 22px; }
.photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .photo-card { border:1px solid var(--line); border-radius:4px; background:white; padding:5px; text-align:left; min-width:0; } .photo-card[aria-pressed='true'] { border-color:var(--accent); background:var(--selected); }
.photo-card-crop { display:block; overflow:hidden; } .photo-card img { width:100%; height:100%; display:block; object-fit:cover; } .photo-card span { display:block; padding:8px 3px 3px; font-size:12px; color:var(--text); }
.photo-detail { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; } .photo-action-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .photo-action-row strong { font-size:14px; font-weight:500; }
.upload-button { position:relative; margin:0; display:inline-block; cursor:pointer; border:1px solid #bba8ac; border-radius:4px; padding:8px 12px; color:var(--accent); font-size:12px; } .file-input, .nested-upload { position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; overflow:hidden; } .photo-action-row:has(.file-input:focus-visible) .upload-button, .upload-button:has(.nested-upload:focus-visible) { outline:2px solid var(--accent); outline-offset:4px; }
.filter-choices { display:flex; flex-wrap:wrap; gap:16px; } .choice { display:flex; align-items:center; gap:5px; margin:0; } .reorder-actions { display:flex; gap:6px; flex-wrap:wrap; } .reorder-actions button { font-size:12px; padding-inline:9px; }
.swatches { display:flex; justify-content:space-between; gap:10px; } .swatch { border:0; background:transparent; padding:4px; color:var(--muted); font-size:12px; text-align:center; border-radius:4px; } .swatch span { display:block; width:43px; height:43px; border-radius:50%; background:var(--swatch); margin-bottom:9px; border:3px solid white; } .swatch[aria-pressed='true'] span { outline:1px solid var(--accent); outline-offset:2px; }
.color-fields { display:flex; gap:24px; } .color-fields label { flex:1; } input[type='color'] { display:block; width:100%; height:42px; padding:3px; border:1px solid var(--line); border-radius:4px; background:white; margin-top:10px; cursor:pointer; }
.font-sample { border-block:1px solid var(--line); padding:23px 0; margin:30px 0 14px; font:23px system-ui,sans-serif; color:var(--accent); overflow-wrap:anywhere; } .font-sample small { display:block; margin-top:12px; font:11px system-ui,sans-serif; color:var(--muted); }
.playback-choice { display:flex; gap:12px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); margin:0; } .playback-choice input { margin-top:5px; } .playback-choice small { display:block; font-size:12px; line-height:1.85; color:var(--muted); margin-top:7px; }
.download-note { margin-top:50px; border-top:1px solid var(--line); padding-top:25px; } .download-note h2 { font:21px/1.6 system-ui,sans-serif; color:var(--accent); } .download-note p { font-size:12px; line-height:1.9; color:var(--muted); }
.preview-area { padding:26px 28px; background:var(--workspace); display:flex; flex-direction:column; min-width:0; } .preview-toolbar { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:12px; }
.segmented { display:flex; border:1px solid #ccc0c5; border-radius:4px; margin-left:auto; overflow:hidden; } .segmented button { border:0; background:transparent; color:var(--muted); font-size:12px; padding:8px 12px; } .segmented button[aria-pressed='true'] { background:white; color:var(--accent); } .replay { border:0; background:transparent; color:var(--accent); font-size:12px; padding:8px; white-space:nowrap; }
.preview-stage { flex:1; display:grid; place-items:center; min-height:570px; padding:26px 0; } .preview-stage iframe { border:0; width:min(100%,390px); height:min(72svh,640px); min-height:420px; background:var(--accent); } .preview-stage iframe.desktop { width:100%; height:min(60svh,620px); min-height:400px; }
#guest-dialog { display:none; border:0; background:var(--accent); width:100vw; max-width:none; height:100svh; max-height:none; padding:0; margin:0; } #guest-dialog::backdrop { background:#342d3080; } #guest-dialog iframe { width:100%; height:100%; border:0; display:block; } .dialog-close { position:absolute; right:20px; top:16px; width:44px; height:44px; border:1px solid #eee5cc80; border-radius:50%; background:var(--accent); color:white; font-size:28px; z-index:1; } .dialog-close:focus-visible { outline-color:var(--accent); }
.mobile-view { display:none; }
@media(min-width:901px) { .chapters { position:sticky; top:72px; height:calc(100svh - 72px); } .preview-area { position:sticky; top:72px; height:calc(100svh - 72px); } }
@media(max-width:1100px) and (min-width:901px) { .app-shell { grid-template-columns:170px 320px minmax(0,1fr); } .topbar { padding-inline:20px; gap:14px; } .top-actions { gap:2px; } .controls { padding-inline:22px; } .preview-area { padding-inline:16px; } .preview-toolbar { gap:5px; } }
@media(max-width:900px) { .app-shell { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:calc(100svh - 140px); } .chapters { grid-column:1/-1; padding:10px 18px; border-right:0; border-bottom:1px solid var(--line); } .cover-thumb,.local-note,.template-link { display:none; } .chapter-list { margin:0; display:flex; gap:6px; overflow:auto; } .chapter { width:auto; flex:1; white-space:nowrap; padding:12px 10px; border:0; } .chapter-symbol,.chapter small { display:none; } .chapter span { font-size:13px; } .controls { padding:26px 22px; } .preview-area { padding:24px 18px; } .preview-stage { min-height:450px; } .preview-stage iframe { min-height:400px; height:560px; } .topbar { padding-inline:18px; gap:14px; } .brand small { display:none; } .top-actions { gap:3px; } }
@media(max-width:600px) { .topbar { display:grid; grid-template-columns:1fr auto; gap:7px 10px; padding:12px 16px; } .brand { font-size:24px; } .save-state { grid-column:1/-1; grid-row:2; font-size:11px; } .top-actions { grid-column:2; grid-row:1; gap:6px; } .top-actions #save { display:none; } .top-actions .outline-button,.top-actions .primary-button { min-height:36px; font-size:12px; padding:8px 10px; } .history-actions { gap:0; } .icon-button { min-width:30px; min-height:36px; font-size:21px; } .mobile-view { display:flex; gap:4px; border-bottom:1px solid var(--line); padding:5px 16px; background:white; } .mobile-view button { flex:1; border:0; border-radius:4px; background:transparent; color:var(--muted); padding:10px; font-size:13px; } .mobile-view button[aria-pressed='true'] { background:var(--selected); color:var(--accent); } .app-shell { display:block; } .controls { border:0; padding:28px 22px; } .app-shell[data-view='edit'] .preview-area { display:none; } .app-shell[data-view='preview'] .controls,.app-shell[data-view='preview'] .chapters { display:none; } .preview-area { min-height:calc(100svh - 144px); padding:20px 18px; } .preview-stage { min-height:0; padding-block:20px; } .preview-stage iframe { height:calc(100svh - 275px); min-height:400px; max-width:390px; } .preview-stage iframe.desktop { height:420px; } .section-heading h1 { font-size:29px; } .chapter-list { gap:0; } .chapters { padding-inline:10px; } .chapter { padding-inline:9px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
textarea, select, input[type='time'], input[type='tel'], input[type='email'] { display:block; width:100%; max-width:100%; margin-top:8px; border:1px solid var(--line); border-radius:4px; background:#fcfbfc; padding:11px 12px; color:var(--text); font-family:inherit; font-size:15px; line-height:1.6; min-height:44px; }
textarea { resize:vertical; font-family:inherit; }
select { font:inherit; }
.toggle { display:flex; gap:9px; align-items:center; }
.toggle input { accent-color:var(--accent); }
.nested-photo { border-top:1px solid var(--line); padding-top:20px; }
.photo-crop-preview { width:100%; aspect-ratio:83/69; overflow:hidden; margin-bottom:15px; }
.photo-crop-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.collage-main-preview { aspect-ratio:634.0032/585.0014; clip-path:polygon(0 0,78.5% 0,78.5% 22.6%,100% 22.6%,100% 100%,35% 100%,35% 79%,0 79%); }
.collage-top-preview { aspect-ratio:284.959/246.0118; }
.collage-bottom-preview { aspect-ratio:328.987/320.9856; }
.note-preview { aspect-ratio:41.6/42; }
[data-photo-drag] { cursor:grab; touch-action:none; user-select:none; }
[data-photo-drag] img { pointer-events:none; }
[data-photo-drag][data-dragging] { cursor:grabbing; }
[data-photo-drag]:focus-visible, .heart-control-preview:focus-within { outline:2px solid var(--accent); outline-offset:4px; }
.nested-photo .upload-button { display:block; margin-bottom:20px; }
.chapters { min-width:0; }
@media(min-width:901px) { .chapters { overflow-y:auto; } .local-note { padding-top:24px; } .chapter-list { margin-top:20px; } .chapter { padding-block:12px; } }
@media(max-width:900px) { .chapter { flex:0 0 auto; } .chapter-list { width:100%; max-width:100%; } }
:root { --accent:#86596b; --text:#4a4a4a; --muted:#81767b; --line:rgba(180,130,100,.2); --workspace:#f6f3f4; --selected:#f0e6eb; }
.topbar button,.recovery button { min-height:44px; border:1px solid var(--line); border-radius:4px; padding:8px 12px; background:transparent; color:var(--accent); }
.topbar .primary-button { background:var(--accent); color:white; }
.brand,.controls h1,.template-name,.local-note { font-family:inherit; }
.controls h1 { margin:0 0 28px; font-size:26px; font-weight:500; color:var(--accent); }
select,textarea,input[type='time'] { display:block; width:100%; min-height:44px; margin-top:8px; padding:10px; font:inherit; color:var(--text); background:#fcfbfc; border:1px solid var(--line); border-radius:4px; }
textarea { resize:vertical; line-height:1.8; }
input[type='checkbox'] { accent-color:var(--accent); margin-left:12px; }
.field-feedback { display:block; color:var(--accent); margin-top:7px; font-size:12px; }
.photo-card img { aspect-ratio:1; height:auto; object-fit:cover; }
.photo-card { overflow:hidden; }
.photo-workspace { width:min(100%, 240px); margin:12px auto 10px; }
.photo-viewport { position:relative; overflow:hidden; width:100%; background:var(--workspace); }
.photo-viewport img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-workspace [tabindex] { cursor:grab; }
.photo-workspace [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.photo-workspace .heart-artwork { background:var(--workspace); }
.photo-upload input[type='file'] { display:block; width:100%; margin-top:8px; font-size:12px; }
.reorder-actions button { min-height:44px; border:1px solid var(--line); background:transparent; color:var(--accent); border-radius:4px; }
.recovery { padding:12px 24px; background:var(--selected); color:var(--accent); }
.recovery p { margin:0 0 12px; }
.place-control-title { display:block; }
.place-control-hint { display:block; margin-top:7px; color:var(--text); font-size:12px; line-height:1.75; }
.place-picker { margin-top:8px; }
.place-picker input[type='search'] { display:block; width:100%; min-height:44px; padding:11px 12px; border:1px solid var(--line); border-radius:4px; background:white; color:var(--text); font:inherit; }
.place-picker input[type='search']:focus { border-color:var(--accent); }
.place-suggestions { margin:7px 0 0; padding:0; list-style:none; border:1px solid var(--line); background:white; }
.place-suggestion { display:block; width:100%; padding:11px 12px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; }
.place-suggestion:last-child { border-bottom:0; }
.place-suggestion:hover,.place-suggestion:focus-visible { background:var(--selected); }
.place-suggestion strong,.place-suggestion small { display:block; }
.place-suggestion strong { font-size:14px; font-weight:500; }
.place-suggestion small { margin-top:4px; color:var(--text); font-size:12px; line-height:1.5; }
.place-selected { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:8px; padding:10px 12px; border:1px solid var(--accent); background:var(--selected); color:var(--text); font-size:13px; line-height:1.6; }
.place-clear { flex:0 0 auto; border:0; background:transparent; color:var(--accent); padding:0; font-size:12px; text-decoration:underline; }
.place-attribution { display:block; margin-top:5px; color:var(--text); font-size:11px; }
[hidden] { display:none !important; }
@media(max-width:620px) { .topbar { gap:8px; flex-wrap:wrap; padding:10px 12px; } .save-state { order:3; flex-basis:100%; } .top-actions { margin-left:auto; } .topbar button { padding:6px 8px; font-size:12px; } .brand small { display:none; } .app-shell { display:flex; flex-direction:column; } .chapters { padding:10px; } .chapter-list { display:flex; overflow:auto; } .controls { border:0; padding:24px 18px; } .preview-area { display:none; padding:20px 18px; } .preview-stage iframe { height:640px; } .template-name { display:none; } .chapters>a { font-size:12px; } }

@media(min-width:621px) {
  #app { height:100svh; display:grid; grid-template-rows:auto auto minmax(0,1fr); }
  .topbar { grid-row:1; }
  .recovery { grid-row:2; }
  .app-shell { grid-row:3; min-height:0; overflow:hidden; }
  .controls { overflow-y:auto; min-height:0; }
  .chapters,.preview-area { position:static; height:auto; min-height:0; }
  .preview-stage { min-height:0; padding-bottom:0; }
  .preview-stage iframe,.preview-stage iframe.desktop { height:100%; min-height:0; }
}
@media(min-width:621px) and (max-width:900px) { .app-shell { grid-template-rows:auto minmax(0,1fr); } }

.app-shell { grid-template-columns:minmax(320px,420px) minmax(0,1fr); }
.editor-field { scroll-margin-top:34px; }
.controls .template-name { margin:0 0 28px; font-size:26px; font-weight:500; color:var(--accent); }
@media(min-width:621px) and (max-width:900px) { .app-shell { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); } }
@media(max-width:620px) { .controls .template-name,.controls .local-note { display:block; } }
.panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
.editor-field { grid-column:1/-1; min-width:0; }
.editor-field:has(input[type='color']) { grid-column:auto; }
input[type='color'] { display:block; width:100%; min-height:44px; margin-top:8px; }
@media(min-width:621px) { .editor-field[data-field='name-0'], .editor-field[data-field='name-1'] { grid-column:auto; } }

@media(max-width:620px) {
  .topbar { display:flex; flex-wrap:wrap; }
  .top-actions { width:100%; margin-left:0; justify-content:space-between; flex-wrap:wrap; }
  .published-actions { flex-basis:100%; }
  .top-actions button { white-space:nowrap; }
  .history-actions { margin-left:auto; }
}

.editor-group { grid-column:1/-1; min-width:0; border:1px solid var(--line); padding:20px 20px 0; background:white; }
.editor-group[data-section-off] .editor-group-settings { display:none; }
.editor-group-settings { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.editor-group-settings summary { cursor:pointer; color:var(--accent); font-size:12px; }
.section-toggle-control { margin:0; padding:0; border:0; }
.section-toggle-control legend { margin:0 0 6px; color:var(--accent); font-size:18px; font-weight:500; }
.section-toggle-description { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.section-toggle-actions { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:16px; padding:4px; background:var(--workspace); }
.section-toggle-actions button { min-height:40px; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:13px; }
.section-toggle-actions button.selected { background:var(--accent); color:white; }

.sectioned-editor .panels { display:block; }
.editor-section-index { display:flex; flex-wrap:nowrap; gap:4px; position:sticky; top:-34px; z-index:2; min-width:0; max-width:100%; overflow-x:auto; padding:12px 0; margin-bottom:28px; background:white; border-bottom:1px solid var(--line); }
.editor-section-index a { flex:0 0 auto; white-space:nowrap; text-decoration:none; font-size:12px; padding:8px 10px; min-height:36px; color:var(--muted); border-radius:4px; }
.editor-section-index a[aria-current='location'] { color:var(--accent); background:var(--selected); }
.editor-section { min-width:0; margin:0 0 38px 11px; padding-left:24px; border-left:1px solid var(--line); scroll-margin-top:calc(var(--editor-index-height,100px) + 24px); }
.editor-section-heading { display:flex; align-items:baseline; gap:12px; margin-bottom:22px; }
.editor-section-number { margin-left:-36px; border:1px solid var(--accent); color:var(--accent); background:white; display:grid; place-items:center; min-width:24px; height:24px; border-radius:50%; font-size:11px; }
.editor-section-heading h2 { margin:0; font-size:21px; font-weight:600; }
.editor-section-heading p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.editor-section-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
.sectioned-editor .editor-group { border:0; padding:0; background:transparent; margin-bottom:22px; }
.sectioned-editor .editor-group-settings .editor-field:first-of-type { margin-top:18px; }
.controls h1,.controls .template-name,.controls h2 { font-family:'HanWangYanKai','SatsukiGendaiMincho','Noto Serif TC',serif; font-weight:400; }
@media(min-width:621px) and (max-width:900px) { .editor-section-index { top:-26px; } }
@media(max-width:620px) { .editor-section-index { top:var(--editor-topbar-height,140px); } .editor-section { scroll-margin-top:calc(var(--editor-topbar-height,140px) + var(--editor-index-height,100px) + 24px); } }
fieldset.audio-control { display: grid; gap: .75rem; }
fieldset.audio-control > label { min-width:0; }
fieldset.audio-control input[type='file'] { width:100%; min-width:0; }
fieldset.audio-control audio { width: 100%; max-width: 32rem; }
fieldset.audio-control > span { overflow-wrap: anywhere; }

#guest-dialog[open] { display:flex; flex-direction:column; }
#guest-dialog .dialog-header { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:white; color:var(--text); }
#guest-dialog .dialog-header h2 { margin:0; font:20px/1.4 system-ui,sans-serif; }
#guest-dialog .dialog-close { position:static; width:auto; height:44px; padding:8px 14px; border:1px solid var(--accent); border-radius:4px; background:var(--accent); color:white; font-size:13px; }
#guest-dialog iframe { flex:1; min-height:0; height:auto; }
body[data-preview-open='true'] { overflow:hidden; }

@media(max-width:620px) {
  .topbar { min-height:52px; align-items:center; padding:7px 10px; gap:4px; }
  .brand { gap:6px; font-size:18px; }
  .brand img { width:64px; }
  .save-state[data-tone='error'] { order:3; flex-basis:100%; }
  .history-actions { margin-left:auto; gap:2px; }
  .top-actions { width:auto; margin-left:0; flex-wrap:wrap; gap:4px; }
  .draft-actions { position:static; display:flex; width:auto; margin:0; padding:0; gap:4px; border:0; background:transparent; }
  .top-actions .draft-actions button { flex:0 0 auto; min-height:36px; padding:8px 10px; font-size:12px; }
  .published-result { margin-top:24px; }
}
fieldset.audio-control .audio-control-hint { margin: 0; color: var(--muted, #756b63); }

.history-actions button { display:grid; place-items:center; width:28px; min-height:36px; padding:0; border:0; border-radius:0; background:transparent; color:var(--accent); opacity:1; }
.history-actions button:disabled { color:var(--muted); opacity:1; }
.history-actions svg { display:block; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }