/* Zapih presentation system. Media/canvas geometry remains in style.css. */
:root, .cloud-mode {
  --accent:#087f74; --accent-hover:#06685f; --ink:#18272b; --muted:#607078;
  --line:#dce5e5; --soft:#f4f7f7; --radius:24px; --focus:#087f74;
  --surface:#fff; --canvas:#f5f7f8; --accent-soft:#e9f5f1;
  --shadow:0 8px 30px #1b393a05,0 1px 3px #1b393a03;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-10:40px;
  color:var(--ink); background:var(--canvas); font-size:15px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html { scroll-padding-top:24px; }
body { min-width:320px; }
button, a, input, select, textarea, summary { touch-action:manipulation; }
button { color:inherit; }
button:disabled { opacity:.48; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
h1,h2,h3 { color:var(--ink); }
h1 { font-size:clamp(30px,3.1vw,44px); letter-spacing:-1.6px; font-weight:700; line-height:1.15; }
h2 { font-size:28px; letter-spacing:-.9px; line-height:1.2; font-weight:650; }
h3 { font-size:16px; font-weight:650; line-height:1.4; }
p { font-size:15px; line-height:1.65; }
label { color:#40555c; font-size:13px; font-weight:600; }
.fine { font-size:12px!important; color:var(--muted)!important; line-height:1.65; }
.section-label,.intro-eyebrow { color:var(--muted); font-size:11px; font-weight:650; letter-spacing:1.5px; }
.intro-eyebrow { display:block; color:var(--accent); margin:0 0 14px; }
.primary,.secondary { min-height:46px; padding:12px 18px; font-size:14px; border-radius:12px; white-space:normal; }
.primary,.cloud-mode .primary { color:white; background:var(--accent); box-shadow:0 2px 3px #0a564b0a; }
.primary:hover:not(:disabled),.cloud-mode .primary:hover:not(:disabled) { background:var(--accent-hover); }
.primary:active:not(:disabled),.cloud-mode .primary:active:not(:disabled) { background:#05594f; }
.secondary { border-color:var(--line); color:var(--ink); background:#fff; }
.secondary:hover:not(:disabled) { border-color:#aec5c3; background:var(--soft); }
.text-button { min-height:44px; font-size:13px; border-radius:10px; }
.text-button:hover:not(:disabled) { background:var(--accent-soft); }
.icon-button { width:44px; height:44px; border-radius:12px; }
button,input,select,textarea,a,summary { transition:background-color .16s,border-color .16s,box-shadow .16s; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { min-height:44px; font-size:15px; border-color:#cbd9d9; border-radius:10px; color:var(--ink); }
input::placeholder,textarea::placeholder { color:#74838a; }
input[type=checkbox],input[type=radio] { accent-color:var(--accent); }
input[type=range] { min-height:36px; }
select { padding:11px 12px; }
summary { cursor:pointer; min-height:44px; display:list-item; align-content:center; line-height:1.5; }
.app-header,.cloud-mode .app-header {
  height:auto; min-height:88px; padding:14px max(28px,calc((100% - 1200px)/2));
  background:#fff; gap:28px; border-bottom:1px solid var(--line); position:relative; z-index:8;
}
.app-header .brand { flex-shrink:0; }
.brand-identity { color:#16bd62; }
.brand-version { color:#607078; }
.connection { min-height:44px; padding:12px 16px; font-size:13px; border-radius:12px; }
.cloud-header { flex:1; display:flex; justify-content:space-between; gap:24px; }
.primary-nav { display:flex; gap:4px; align-items:center; }
.nav-button { min-height:44px; border:0; background:transparent; padding:12px 16px; border-radius:10px; font-size:14px; color:var(--muted); font-weight:550; white-space:nowrap; }
.nav-button:hover { background:var(--soft); color:var(--ink); }
.nav-button[aria-current=page] { color:var(--accent); background:var(--accent-soft); }
.header-account { display:flex; align-items:center; gap:12px; }
.cloud-header .primary,.cloud-header .secondary { font-size:13px; min-height:44px; padding:11px 15px; }
.account-menu { position:relative; }
.account-menu>summary { min-height:44px; display:flex; align-items:center; gap:8px; list-style:none; font-size:13px; font-weight:550; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; }
.account-menu>summary::-webkit-details-marker { display:none; }
.account-menu>summary:hover,.account-menu[open]>summary { background:var(--soft); }
.account-menu svg { width:19px; height:19px; }
.account-menu .menu-chevron { width:14px; height:14px; }
.account-menu-content { position:absolute; z-index:12; right:0; top:calc(100% + 10px); width:232px; background:white; border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 48px #173c3b20; padding:12px; display:grid; gap:8px; }
.account-menu-content label { padding:6px 3px 0; font-size:12px; }
.cloud-header .account-menu-content select { max-width:none; width:100%; min-height:44px; font-size:14px!important; padding:10px; }
.account-menu-content .secondary,.account-menu-content .text-button { width:100%; justify-content:flex-start; text-align:left; font-size:14px!important; }
main { max-width:1256px; padding:46px 28px 0; }
.intro,.cloud-mode .intro { margin-bottom:32px; align-items:flex-end; }
.intro p { font-size:16px; line-height:1.6; margin-top:12px; }
.privacy-note { font-size:12px; padding:9px 0; color:var(--muted); }
.steps { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 0 16px; margin:0 0 26px; gap:12px; }
.steps button { min-height:48px; font-size:14px; justify-content:flex-start; gap:12px; border-radius:12px; padding:10px 16px; color:var(--muted); }
.steps button:disabled { opacity:.65; }
.steps button.active { background:var(--accent-soft); box-shadow:none; color:#075f57; }
.steps button.complete { color:var(--accent); }
.step-number { width:26px; height:26px; font-size:12px; border-color:#bdcccf; background:#fff; }
.steps button.complete .step-number { color:var(--accent); background:var(--accent-soft); border-color:#b6d9cc; }
.panel { border-radius:var(--radius); box-shadow:var(--shadow); }
.source-panel { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.import-copy { padding:38px 40px; }
.section-description { font-size:15px; margin-bottom:26px; color:var(--muted); }
.dropzone { min-height:236px; border:1.5px dashed #b7ceca; border-radius:18px; padding:25px 20px; background:#f8fbfa; gap:9px; }
.dropzone>svg { width:42px; height:42px; color:var(--accent); margin-bottom:4px; }
.dropzone>strong { font-size:16px; text-align:center; }
.dropzone>.drop-hint { font-size:13px; }
.dropzone>.primary { min-height:44px; padding:11px 25px; margin:5px 0; border-radius:11px; }
.dropzone>small { font-size:11px; line-height:1.6; color:var(--muted); }
.dropzone.drag-over { background:var(--accent-soft); border-color:var(--accent); box-shadow:0 0 0 4px #087f7414; }
.device-actions { gap:10px; margin-top:12px; }
.device-actions>button { font-size:13px; min-height:44px; }
.divider { font-size:12px; margin:24px 0 20px; color:var(--muted); }
.url-field { border-radius:12px; border-color:#cbd9d9; padding:5px; margin-top:9px; }
.url-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px #087f7414; }
.url-field input { font-size:14px!important; padding:10px; min-height:40px!important; background:transparent; }
.url-field .primary { min-height:42px; padding:11px 18px; font-size:13px; }
.source-guide { background:#eef5f1; border-color:#dde9e2; padding:40px; position:relative; }
.source-guide h3 { margin:28px 0 10px; font-size:26px; letter-spacing:-.8px; }
.source-guide>p { font-size:15px; max-width:340px; }
.source-guide>.fine { margin-top:26px; max-width:340px; }
.guide-art { margin:14px 0 20px; }
.sample-frame { width:236px; height:254px; border-radius:36px; border-color:#e2ebe4; transform:rotate(-7deg); box-shadow:0 18px 32px #305b4812,0 2px 3px #305b4805; }
.sample-frame>svg { width:215px; height:194px; top:33px; left:10px; }
.sample-caption { font-size:18px; letter-spacing:-.5px; color:#235b50; top:24px; font-weight:650; }
.sample-caption.bottom { font-size:29px; bottom:19px; font-weight:750; letter-spacing:-1px; }
.sample-chip { font-size:11px; padding:11px 14px; color:#356d5b; bottom:-10px; right:-24px; border-color:#d8e7dd; box-shadow:0 4px 12px #274c3510; }
.feature-list { gap:13px; margin-top:10px; }
.feature-list li { font-size:13px; color:#405c52; }
.feature-list li span { color:var(--accent); }
.account-panel { border:1px solid #cde2da; border-radius:20px; background:#edf6f2; padding:28px 32px; gap:28px; }
.account-panel h2 { font-size:25px; }
.account-panel p { font-size:14px; max-width:660px; }
.account-panel .section-label { color:var(--accent); }
.account-panel>a { align-self:center; }
#account-status:empty { display:none; }
.requires-account { opacity:1; }
.editor { grid-template-columns:minmax(0,1.25fr) minmax(355px,1fr); }
.workspace { padding:32px; background:#f6f9f8; }
.controls,.customization .customize-controls { padding:32px; }
.controls>p { font-size:14px; }
.workspace-heading { margin-bottom:24px; }
.badge { padding:6px 9px; font-size:10px; border-radius:7px; color:#52676d; }
.trim-viewer { height:360px; background:#172426; border-radius:16px; }
.trim-play { width:44px; height:44px; border-color:var(--line); color:var(--ink); }
.trim-playback { font-size:13px; }
.trim-preview-label,.trim-timestamps,.trim-hint { font-size:12px; color:var(--muted); }
.trim-workspace .asset-heading h3 { font-size:13px; }
.trim-workspace .asset-heading p { font-size:12px!important; }
.trim-exact { font-size:13px; }
.trim-exact summary { min-height:44px; padding:12px 0; }
.time-fields label { font-size:12px; }
.trim-controls .duration-presets button { min-height:44px; font-size:13px; }
.trim-controls .duration-presets button[aria-pressed=true] { background:var(--accent-soft); color:var(--accent); border-color:#98c5ba; box-shadow:none; }
.trim-duration-card { margin:12px 0 22px; padding:22px 0; }
.trim-duration-card strong { color:var(--ink); font-size:48px; }
.trim-duration-card small { font-size:12px; }
.trim-duration-card .trim-limit { font-size:11px; background:var(--soft); color:var(--muted); }
.trim-unlock-card { background:#fff; border-color:var(--line); border-radius:14px; padding:18px; }
.trim-unlock-heading,.trim-unlock-warning { font-size:12px; }
.trim-unlock-switch { min-height:44px; font-size:14px; }
.tip { background:var(--accent-soft); border-color:#cce6dc; color:#315e54; font-size:13px!important; padding:14px 16px; border-radius:12px; }
.preview-sticky,.customization .preview-sticky { top:24px; }
.crop-surround,.customization .crop-surround { box-shadow:0 0 0 7px #e1ebe7; margin:30px auto; border-radius:12px; width:min(100%,420px); }
.preview-toolbar { margin-top:24px; }
.move-controls { background:#e6eeeb; border-color:#dbe7e1; padding:4px; }
.move-controls button { min-height:40px; font-size:12px; padding:10px 14px; }
.preview-help { font-size:12px!important; max-width:360px; }
.export-specs span { font-size:11px; color:var(--muted); padding:7px 10px; border-color:var(--line); border-radius:8px; }
.editor-version { display:none; }
.editor-intro { font-size:14px!important; margin-bottom:22px; }
.control-heading h3 { font-size:16px; }
.control-heading .text-button { min-height:44px; font-size:12px; }
.crop-editor { padding:6px 0 22px; margin-bottom:22px; }
.slider-label { font-size:13px; margin-top:18px; }
.advanced summary,.editor-transform summary { min-height:44px; font-size:13px; padding:10px 0; color:var(--muted); }
.editor-history .icon-button { width:44px; height:44px; font-size:24px; }
.editor-add { gap:8px; margin:16px 0; }
.editor-add .secondary { font-size:13px; min-height:46px; }
.editor-empty { background:var(--soft); border-color:#cadbd6; font-size:13px; padding:22px 18px; border-radius:12px; color:var(--muted); }
.editor-layer { min-height:50px; padding:9px 12px; gap:10px; border-radius:11px; }
.editor-layer-name { font-size:13px; }
.editor-layer-kind { font-size:11px; }
.editor-layer-actions .text-button { min-height:44px; padding:8px; font-size:12px; }
.editor-selection-heading>strong { font-size:13px; }
.sticker-editor .fine { font-size:12px!important; }
.sticker-editor textarea { min-height:90px; font-size:15px; }
.sticker-editor .text-input-label { font-size:13px; }
.sticker-editor input[type=number],.editor-fields input,.editor-url input,.sticker-editor select { min-height:44px; font-size:14px; }
.editor-text-style { grid-template-columns:56px minmax(0,1fr) 94px; }
.editor-text-style input[type=color] { height:44px; }
.editor-button-row .secondary { min-height:44px; font-size:12px; padding:10px; }
.editor-check { min-height:44px; font-size:13px; gap:10px; }
.emoji-grid button { min-height:44px; }
.emoji-picker,.editor-image-panel { border-radius:14px; background:var(--soft); padding:16px; }
.editor-url .secondary { min-height:44px; font-size:13px; }
.visibility-controls { margin-top:18px; padding:18px 0 22px; }
.visibility-options label { padding:15px; border-radius:12px; }
.visibility-options strong { font-size:14px; }
.visibility-options small { font-size:12px; }
.visibility-options label:has(input:checked) { border-color:#85bfb0; background:var(--accent-soft); }
.signature-controls .fine { font-size:12px!important; }
.watermark-switch { border-radius:12px; padding:15px; }
.watermark-switch-copy strong { font-size:14px; }
.watermark-switch-copy>span { font-size:12px; }
.signature-balance { font-size:12px; }
.editor-actions { padding-top:24px; }
.chat-preview { border-radius:18px; background:#e5efe9; border-color:#dce7df; min-height:395px; }
.chat-preview-header { padding:17px 20px; background:#f8fbf9; }
.chat-preview-header strong { font-size:13px; }
.chat-preview-header small { font-size:11px; color:#597367; }
.chat-preview-header .avatar { width:38px; height:38px; font-size:12px; }
.sticker-bubble img { width:250px; }
.sticker-bubble>span { font-size:11px; color:#526e60; }
.code-row input { background:var(--accent-soft); border-color:#c7dfd5; color:#155e50; }
.cloud-code-panel>label { font-size:12px; }
.code-row .secondary { font-size:13px; }
.whatsapp-qr figcaption { font-size:13px; }
#alert { padding:16px 18px; border-radius:14px; background:#fff4ef; color:#8e3d2d; border-color:#e8c7b9; font-size:14px; }
#alert .icon-button { width:44px; height:44px; }
#alert .text-button { font-size:13px; }
dialog { border-radius:24px; padding:32px; max-width:480px; width:calc(100% - 32px); box-shadow:0 24px 100px #152c3340; border-color:var(--line); }
dialog::backdrop { background:#15292e80; backdrop-filter:blur(5px); }
dialog h2 { font-size:27px; padding-right:25px; margin-top:12px; }
dialog p { font-size:14px; }
dialog .close { width:44px; height:44px; top:12px; right:12px; font-size:25px; border-radius:12px; display:grid; place-items:center; border:0; color:var(--muted); }
.profile-dialog h2 { margin-top:12px; }
.profile-preview>span { font-size:12px; }
.profile-error,.catalog-form-error { padding:12px 14px; border:1px solid #e8c7b9; border-radius:10px; color:#963d30!important; background:#fff4ef; }
#pair-content ol { font-size:14px; line-height:1.7; padding-left:23px; }
#pair-content li { padding-left:4px; margin-bottom:12px; }
#phone-content a { font-size:13px; }
#busy,#busy.creating-sticker { padding:36px; max-width:440px; }
#busy h2 { font-size:24px; }
#busy p { font-size:14px; }
.creation-steps li { font-size:12px; }
.creation-activity-card { background:var(--soft); border-radius:14px; padding:16px; }
#busy .creation-activity-card p { font-size:13px; }
.import-picker,.youtube-picker,.youtube-imports { border-radius:16px; border-color:var(--line); background:var(--soft); }
.import-picker { padding:22px; border:1px solid var(--line); }
.import-item { border-radius:12px; }
.import-preview-dialog { max-width:900px; }
.import-preview-stage { border-radius:14px; }
.youtube-time-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.youtube-time-fields button { grid-column:1/-1; }
.youtube-time-fields label { font-size:13px; min-width:0; }
.youtube-clip-actions .duration-presets { width:100%; }
.youtube-clip-actions .duration-presets button { min-height:44px; min-width:56px; white-space:nowrap; font-size:13px; }
.library-panel { padding:34px; }
.library-heading h2 { font-size:32px; margin:8px 0 14px; }
.catalog-tabs { margin:14px 0 24px; gap:6px; }
.catalog-tabs button { min-height:48px; font-size:14px; padding:12px 20px; }
.catalog-tabs button[aria-selected=true] { color:var(--accent); border-color:var(--accent); }
.catalog-search { min-height:54px!important; font-size:16px!important; background:#fff; border-radius:14px!important; border-color:#cbd9d9; padding:16px 18px; }
.catalog-search:focus { outline-color:var(--focus); }
.catalog-quick-categories { gap:8px; padding:16px 2px 18px; }
.category-chip { min-height:44px; font-size:13px; color:#465e5a; padding:10px 14px; }
.category-chip[aria-pressed=true] { color:var(--accent); background:var(--accent-soft); border-color:#71af9f; box-shadow:inset 0 0 0 1px #71af9f; }
.catalog-filters { gap:16px; }
.catalog-filters>label { font-size:12px; }
.catalog-filters>.catalog-people-filter { min-height:44px; font-size:13px; }
.catalog-filters>.text-button { font-size:13px; }
#library-status { margin:24px 0 0; min-height:20px; }
#catalog-results { border-radius:16px; }
.catalog-feedback { padding:44px 24px; margin:24px 0 0; text-align:center; background:var(--soft); border:1px dashed #cbdcd7; border-radius:18px; }
.catalog-feedback-title { font-size:21px; letter-spacing:-.4px; margin:0 0 10px; }
.catalog-feedback-copy { max-width:440px; margin:0 auto; font-size:14px; }
.catalog-feedback-actions { display:flex; justify-content:center; gap:12px; margin-top:22px; }
.catalog-feedback[data-state=loading] { border-style:solid; }
.catalog-feedback .spinner { margin:0 auto 18px; width:28px; height:28px; border-width:3px; }
.catalog-feedback[data-state=error] { border-color:#e9c8b8; background:#fff7f2; }
.catalog-detail-status { font-size:13px; border-radius:10px; padding:12px 14px; background:#fff4ef; color:#963d30; }
.catalog-detail-status:empty { display:none; }
.sticker-list { gap:20px; margin-top:24px; }
.catalog-card { padding:14px; border-radius:18px; box-shadow:0 2px 5px #153b2b03; transition:border-color .16s,box-shadow .16s; }
.catalog-card:hover { border-color:#aecac0; box-shadow:0 6px 20px #153b2b08; }
.catalog-card .catalog-preview { border-radius:12px; background:#f2f7f4; }
.catalog-card h3 { font-size:16px; margin:16px 0 5px; }
.catalog-card-categories { font-size:12px; line-height:1.5; margin-bottom:14px; }
.catalog-card-actions button,.catalog-card-actions>a { font-size:12px; min-height:44px; padding:10px 8px; border-radius:10px; }
.catalog-visibility-badge { font-size:12px; }
.catalog-editor-dialog { max-width:680px; }
.catalog-category-fieldset legend { font-size:14px; }
.catalog-field { font-size:13px; }
.catalog-social-entry { font-size:13px; }
.catalog-social-entry button { min-height:44px; font-size:12px; }
.catalog-social-link { font-size:14px; min-height:32px; padding:7px 0; }
.catalog-detail-dialog:not(.catalog-public-detail) { max-width:540px; }
.catalog-detail-actions>* { font-size:13px; }
.catalog-technical summary { font-size:13px; min-height:44px; }
.sticker-metadata { font-size:12px; }
.sticker-file-url,.sticker-url-note { font-size:12px; }
footer { font-size:12px; margin:28px 2px 32px; color:var(--muted); align-items:center; }
footer a { min-height:44px; display:inline-flex; align-items:center; }
footer nav { display:flex; gap:20px; flex-wrap:wrap; }
@media(min-width:1100px) { .customization { grid-template-columns:minmax(0,1.4fr) minmax(390px,1fr); } }
@media(max-width:1100px) {
  .app-header,.cloud-mode .app-header { gap:18px; padding:14px 24px; }
  .cloud-header { gap:12px; }
  .nav-button { padding:11px 12px; font-size:13px; }
  .account-menu>summary>span { display:none; }
  .account-menu>summary { gap:5px; }
  .import-copy,.source-guide { padding:30px; }
  .sample-frame { width:210px; height:232px; }
  .sample-frame>svg { width:190px; height:180px; top:30px; }
  .controls,.workspace,.customization .customize-controls { padding:26px; }
  .editor { grid-template-columns:minmax(0,1fr) minmax(340px,1fr); }
}
@media(max-width:850px) {
  main { padding:32px 20px 0; }
  .app-header,.cloud-mode .app-header { padding:12px 20px; gap:14px; }
  .cloud-mode .app-header { flex-wrap:wrap; }
  .cloud-header { display:contents; }
  .header-account { margin-left:auto; }
  .primary-nav { order:3; flex:1 0 100%; padding-top:8px; border-top:1px solid var(--line); }
  .primary-nav .nav-button { flex:1; }
  .intro,.cloud-mode .intro { margin-bottom:26px; }
  .intro p { font-size:15px; }
  .privacy-note { display:none; }
  .steps { gap:4px; }
  .steps button { font-size:13px; padding:10px 8px; gap:8px; }
  .source-panel { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  .import-copy,.source-guide { padding:26px; }
  .source-guide>p { font-size:14px; }
  .feature-list li { font-size:12px; }
  .source-guide h3 { font-size:24px; }
  .sample-frame { width:180px; height:210px; border-radius:28px; }
  .sample-frame>svg { width:165px; height:160px; left:6px; top:27px; }
  .sample-caption { font-size:16px; top:19px; }
  .sample-caption.bottom { font-size:26px; bottom:15px; }
  .sample-chip { right:-12px; font-size:10px; padding:9px 11px; }
  .device-actions { flex-direction:column; }
  .editor { grid-template-columns:minmax(0,1fr) minmax(320px,1fr); }
  .workspace,.controls,.customization .customize-controls { padding:22px; }
  .trim-viewer { height:280px; }
  .editor-text-style { grid-template-columns:52px minmax(0,1fr) 88px; gap:8px; }
  .editor-button-row .secondary { padding:9px 7px; font-size:11px; }
  .account-panel { padding:24px; }
  .library-panel { padding:26px; }
}
@media(max-width:700px) {
  .panel,.source-panel,.editor,.customization { grid-template-columns:minmax(0,1fr); border-radius:20px; }
  .source-guide { display:none; }
  .workspace { border-right:0; border-bottom:1px solid var(--line); border-radius:20px 20px 0 0; }
  .customization .crop-workspace { position:relative; top:auto; z-index:1; backdrop-filter:none; background:#f6f9f8; box-shadow:none; padding:24px; align-self:auto; }
  .customization .preview-sticky { position:static; }
  .customization .crop-surround { width:min(100%,340px); margin:24px auto; }
  .crop-workspace .workspace-heading { margin-bottom:18px; }
  .crop-workspace .section-label { font-size:11px; }
  .crop-workspace .badge { font-size:10px; }
  .crop-workspace .export-specs { display:none; }
  .customize-controls>.section-label { display:block; }
  .customize-controls h2 { font-size:27px; margin:12px 0; }
  .preview-toolbar { margin-top:20px; }
  .preview-toolbar .icon-button { width:44px; height:44px; }
  .preview-help { margin-top:12px; font-size:12px!important; }
  .editor-actions { position:static; margin:18px 0 0; padding:20px 0 0!important; background:transparent; border-top:1px solid var(--line); backdrop-filter:none; gap:8px; }
  .editor-actions .text-button { min-height:44px; font-size:13px; }
  .editor-button-row .secondary { font-size:12px; }
  .editor-text-style { grid-template-columns:56px minmax(0,1fr) 94px; gap:10px; }
  .device-actions { flex-direction:row; }
  .account-panel { flex-direction:column; align-items:stretch; gap:18px; }
  .account-panel>a { align-self:stretch; }
  .trim-viewer { height:320px; }
  .trim-hint { font-size:12px; }
}
@media(max-width:500px) {
  main { padding:28px 16px 0; }
  .app-header,.cloud-mode .app-header { min-height:76px; padding:12px 16px; gap:12px; }
  h1 { font-size:32px; letter-spacing:-1.2px; }
  .intro { margin-left:2px; margin-right:2px; }
  .intro-eyebrow { font-size:10px; margin-bottom:12px; }
  .intro p { font-size:14px; max-width:100%; margin-top:12px; }
  .connection { font-size:12px; padding:10px 12px; gap:7px; }
  .brand .brand-logo { width:38px; height:38px; }
  .brand-wordmark { font-size:46px; }
  .brand-version { font-size:8px; }
  .cloud-header .primary { max-width:140px!important; font-size:11px!important; padding:10px 12px; }
  .header-account { gap:8px; }
  .account-menu>summary { padding:10px; }
  .account-menu .menu-chevron { display:none; }
  .nav-button { font-size:13px; min-height:44px; }
  .steps { padding-bottom:16px; margin-bottom:20px; gap:4px; }
  .steps button { flex-direction:column; min-height:68px; font-size:11px; gap:7px; padding:8px 3px; white-space:normal; text-align:center; }
  .step-number { width:24px; height:24px; font-size:11px; }
  .import-copy,.controls,.customization .customize-controls { padding:26px 22px; }
  h2 { font-size:26px; }
  .section-description { font-size:14px; }
  .dropzone { min-height:230px; padding:22px 12px; }
  .dropzone>strong { font-size:15px; }
  .dropzone>small { font-size:11px; max-width:240px; }
  .device-actions>button { font-size:12px; padding:10px 7px; }
  .url-field input { font-size:13px!important; padding:8px; }
  .url-field .primary { padding:10px 14px; }
  .fine { font-size:12px!important; }
  .workspace,.customization .crop-workspace { padding:22px; }
  .customization .crop-surround { width:min(100%,310px); }
  .trim-viewer { height:280px; }
  .trim-duration-card strong { font-size:44px; }
  .trim-preview-label { font-size:11px; }
  .controls>p { font-size:14px; }
  .chat-preview { min-height:330px; padding-bottom:20px; }
  .sticker-bubble img { width:225px; }
  .account-panel { padding:24px; border-radius:18px; }
  .account-panel h2 { font-size:25px; }
  .account-panel p { font-size:14px; }
  .library-panel { padding:24px 18px; }
  .library-heading { align-items:flex-start; gap:10px; }
  .library-heading h2 { font-size:27px; }
  .library-actions { gap:5px; }
  .library-actions .secondary { padding:10px; font-size:12px; }
  .catalog-tabs button { padding:12px 9px; font-size:13px; }
  .catalog-filters { gap:12px; }
  .catalog-filters>label { min-width:110px; }
  .catalog-filters>.catalog-people-filter { padding:0; }
  .catalog-card { padding:10px; border-radius:14px; }
  .sticker-list { gap:12px; }
  .catalog-card h3 { font-size:14px; margin-top:12px; }
  .catalog-card-categories { font-size:11px; }
  .catalog-card-actions { flex-direction:column; gap:6px; align-items:stretch; }
  .catalog-card-actions button,.catalog-card-actions>a { flex:auto; font-size:12px; width:100%; }
  .catalog-feedback { padding:32px 18px; }
  dialog { width:calc(100% - 24px); padding:28px 22px; border-radius:20px; max-height:calc(100dvh - 24px); }
  dialog h2 { font-size:25px; }
  dialog p { font-size:14px; }
  #busy,#busy.creating-sticker { padding:32px 24px; }
  .creation-steps li { font-size:11px; }
  .catalog-editor-dialog { padding:28px 22px; }
  .catalog-editor-actions { bottom:-28px; margin:22px -22px -28px; padding:16px 22px; }
  .catalog-social-fields { grid-template-columns:100px minmax(0,1fr); }
  .catalog-social-fields button { grid-column:1/-1; }
  footer,.cloud-mode footer { font-size:11px; gap:12px; flex-wrap:wrap; align-items:flex-start; margin-top:24px; }
  .cloud-mode footer nav { gap:4px 18px; justify-content:flex-start; max-width:none; }
  .whatsapp-qr { display:none; }
  .code-row .secondary { font-size:12px; }
  .import-picker { padding:16px; }
}
@media(max-width:360px) {
  main { padding-left:12px; padding-right:12px; }
  .app-header,.cloud-mode .app-header { padding:12px; }
  .header-account { gap:5px; }
  .cloud-header .primary { max-width:112px!important; }
  .connection { font-size:11px; padding:10px; }
  .brand .brand-logo { width:32px; height:32px; }
  .brand-wordmark { font-size:40px; }
  .brand-version { margin-left:71px; }
  h1 { font-size:29px; }
  .import-copy,.controls,.customization .customize-controls { padding:24px 18px; }
  .device-actions { flex-direction:column; }
  .editor-text-style { grid-template-columns:50px minmax(0,1fr); }
  .editor-text-style>label:last-child { grid-column:1/-1; }
  .editor-selection-heading { flex-wrap:wrap; }
  .sticker-list { grid-template-columns:minmax(0,1fr); }
  .library-heading { flex-wrap:wrap; }
  .import-items { grid-template-columns:minmax(0,1fr); }
}
@media(pointer:coarse) {
  .url-field input,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea { font-size:16px!important; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

/* A compact, optional live preview keeps mobile edits visible without covering the form. */
.mobile-preview-toggle { display:none; }
@media(max-width:700px) {
  .customization .crop-workspace { position:sticky; top:0; z-index:4; padding:12px 20px 14px; background:#f6f9f8f5; backdrop-filter:blur(12px); box-shadow:0 6px 20px #213d3708; }
  .crop-workspace .workspace-heading { margin:0 0 8px; min-height:44px; }
  .crop-workspace .workspace-heading .badge { display:none; }
  .mobile-preview-toggle { display:inline-flex; align-items:center; padding:10px 8px; font-size:12px; }
  .customization .crop-surround { width:min(100%,25dvh,210px); margin:10px auto 16px; box-shadow:0 0 0 5px #e1ebe7; }
  .preview-toolbar { margin-top:10px; }
  .preview-help { display:none; }
  .preview-collapsed #editor-preview-content { display:none; }
  .customization .preview-collapsed { padding-top:6px; padding-bottom:6px; }
  .preview-collapsed .workspace-heading { margin:0; }
  .keyboard-open .customization .crop-workspace { position:relative; }
  .keyboard-open #editor-preview-content { display:none; }
}
@media(max-width:700px) and (max-height:600px) {
  .customization .crop-workspace { position:relative; }
}
@media(min-width:701px) and (max-height:700px) {
  .customization .preview-sticky { position:static; }
  .customization .crop-surround { width:min(100%,52dvh,360px); }
}

body[data-view=editor] .intro,body[data-view=library] .intro { display:none; }

/* Separate helper copy from the visible keyboard focus ring. */
#profile-username-hint { margin-top:10px; }