.story-sticker-art { --sticker-paper: #f3f3f4; --sticker-ink: #252525; --sticker-line: rgba(0,0,0,.2); display: inline-flex; align-items: center; justify-content: center; gap: .5em; max-width: 100%; padding: .6em .85em; border: 1px solid var(--sticker-line); border-radius: .65em; color: var(--sticker-ink); background: var(--sticker-paper); box-shadow: 0 .14em .35em rgba(0,0,0,.15); font-size: inherit; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal; }
/* Preserve saved theme identifiers while keeping the collection mostly monochrome. */
.story-sticker-art[data-theme="sage"] { --sticker-paper: #e6e6e8; }
.story-sticker-art[data-theme="lavender"] { --sticker-paper: #e2dded; --sticker-ink: #302d36; }
.story-sticker-art[data-theme="peach"] { --sticker-paper: #ededee; }
.story-sticker-art[data-theme="ink"] { --sticker-paper: #1c1c1e; --sticker-ink: #f5f5f5; --sticker-line: rgba(255,255,255,.55); }
.story-sticker-art[data-layout="pill"] { border-radius: 3em; }
.story-sticker-art[data-layout="badge"] { flex-direction: column; gap: .35em; padding: .65em 1em; border-radius: 1.1em .35em 1.1em .35em; }
.story-sticker-art[data-layout="stamp"] { border-style: dashed; border-width: 1.5px; border-radius: .3em; box-shadow: 0 0 0 .12em var(--sticker-paper), 0 .15em .4em rgba(0,0,0,.16); }
.story-sticker-icon { display: block; flex: 0 0 auto; width: 1.65em; height: 1.65em; object-fit: contain; filter: brightness(0); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.story-sticker-art[data-layout="badge"] .story-sticker-icon { width: 2.1em; height: 2.1em; }
.story-sticker-art[data-theme="ink"] .story-sticker-icon { filter: brightness(0) invert(1); }
.story-sticker-label { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.story-sticker-object { isolation: isolate; }
.story-composer-preview .story-sticker-sheet { display: flex; flex-direction: column; box-sizing: border-box; max-height: min(90%,520px); padding: 12px; border: 1px solid rgba(235,240,248,.12); background: rgba(39,42,48,.98); overflow: hidden; }
.story-sticker-sheet .story-sheet-heading { flex-shrink: 0; gap: 8px; min-height: 36px; margin-bottom: 4px; }
.story-sticker-sheet .story-sheet-heading strong { font-size: 14px; line-height: 1.3; }
.story-sticker-sheet .story-sheet-heading > button { width: 36px; height: 36px; }
.story-sticker-tabs { display: flex; flex-shrink: 0; gap: 3px; overflow-x: auto; margin: 0 0 8px; padding: 0 0 4px; scrollbar-width: none; overscroll-behavior-inline: contain; }
.story-sticker-tabs button { flex-shrink: 0; min-height: 36px; padding: 6px 8px; border: 1px solid transparent; border-radius: 18px; color: #abb4c3; background: transparent; font-size: 11px !important; line-height: 1.3; }
.story-sticker-tabs button[aria-pressed="true"] { border-color: rgba(224,231,241,.25); color: #f3f5f9; background: rgba(255,255,255,.06); }
.story-sticker-library { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 3px 5px; scrollbar-width: thin; scrollbar-color: #59616e transparent; }
.story-sticker-choice { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; min-height: 104px; padding: 8px 5px; border: 1px dashed rgba(225,233,245,.13); border-radius: 10px; color: #c0c8d4; background: transparent; }
.story-sticker-choice:hover { border-color: rgba(225,233,245,.35); background: rgba(255,255,255,.04); }
.story-sticker-preview { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; min-width: 0; font-size: 10px; }
.story-sticker-preview .story-sticker-art { max-width: 100%; padding: 5px 6px; box-shadow: none; }
.story-sticker-preview .story-sticker-icon { width: 21px; height: 21px; }
.story-sticker-choice-label { display: block; max-width: 100%; color: #aeb8c8; font-size: 11px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.story-sticker-empty { grid-column: 1/-1; padding: 10px; color: #b8c1d0; font-size: 12px; line-height: 1.45; }
.story-sticker-settings { min-height: 0; padding: 0 2px 5px; overflow-y: auto; }
.story-sticker-settings-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 15px; margin: 0 0 10px; font-size: 13px; line-height: 1.35; }
.story-sticker-back { min-height: 36px; padding: 6px 0; border: 0; color: #c7d0df; background: none; font-size: 12px !important; }
.story-sticker-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; color: #bbc5d4; font-size: 12px; line-height: 1.4; }
/* Native fields stay at 16px so touching a field does not zoom the canvas on iOS. */
.story-sticker-settings input, .story-sticker-settings select { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #5a6473; border-radius: 8px; color: #f2f5fa; background: #343b46; font-size: 16px; line-height: 1.3; }
.story-sticker-settings input::placeholder { color: #9ba8bb; }
.story-sticker-help { margin: 8px 0 12px; color: #aeb9c9; font-size: 12px; line-height: 1.45; }
.story-sticker-apply { width: 100%; min-height: 44px; margin-top: 6px; padding: 10px; border: 0; border-radius: 8px; color: #333b47; background: #e5e9ef; font-size: 13px !important; line-height: 1.3; font-weight: 600; }
/* The picker follows the available story width, including short landscape windows. */
@container (max-width: 300px) {
    .story-sticker-library { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
    .story-composer-preview .story-sticker-sheet { padding: 8px; }
    .story-sticker-choice { min-height: 98px; }
}
@media (max-height: 600px) {
    .story-composer-preview .story-sticker-sheet { max-height: 100%; padding-block: 6px; border-radius: 12px; }
    .story-sticker-sheet .story-sheet-heading { margin-bottom: 0; }
    .story-sticker-tabs { margin-bottom: 4px; padding-bottom: 2px; }
    .story-sticker-settings-heading { margin-bottom: 5px; }
    .story-sticker-field { margin-bottom: 8px; }
}
@media (pointer: coarse) {
    .story-sticker-sheet .story-sheet-heading > button { width: 44px; height: 44px; }
    .story-sticker-tabs button, .story-sticker-back { min-height: 44px; }
}