/* Design Studio (designer.js), its dialogs/toasts, and the Create/Publish/Share dialogs (posts.js).
   Uses the theme tokens from theme.css, so it is light by default and follows dark mode. */
html.ds-open, html.ds-open body { overflow: hidden; }
.ds { --ds-rail: 76px; --ds-panel: 320px; position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--surface-0); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
.ds button { font: inherit; }
.ds-grow { flex: 1; }
.ds-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; flex: none; }
.ds-dim { color: var(--ink-3); font-size: 12.5px; }
.ds-bad { color: var(--bad); } .ds-ok { color: var(--ok); } .ds-warn { color: var(--warn); }
.ds-pill { background: var(--accent-soft); color: var(--accent-soft-ink); border-radius: 999px; padding: 2px 10px; font-size: 12px; text-transform: capitalize; }

/* buttons */
.ds-btn, .ds-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); border-radius: 10px; min-height: 38px; padding: 0 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.ds-btn:hover, .ds-icon:hover { background: var(--surface-2); }
.ds-btn:focus-visible, .ds-icon:focus-visible, .ds-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-btn:disabled, .ds-icon:disabled { opacity: .5; cursor: not-allowed; }
.ds-btn.primary { background: #0E7C66; border-color: #0E7C66; color: #fff; }
.ds-btn.primary:hover { background: #0b6b58; }
.ds-btn.danger { color: var(--bad); border-color: var(--bad-soft); }
.ds-btn.ghost { background: transparent; border-color: transparent; }
.ds-btn.ghost:hover { background: var(--surface-2); }
.ds-btn.block { width: 100%; margin-top: 8px; }
.ds-icon { width: 38px; padding: 0; border-color: transparent; background: transparent; }
.ds-icon.on { background: var(--accent-soft); color: var(--accent-soft-ink); }
.ds-icon.danger:hover { color: var(--bad); }

/* top bar */
.ds-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-1); border-bottom: 1px solid var(--line); min-height: 56px; flex: none; }
.ds-name { border: 1px solid transparent; background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; padding: 6px 8px; border-radius: 8px; width: 220px; min-width: 80px; }
.ds-name:hover, .ds-name:focus { border-color: var(--line); background: var(--surface-0); outline: none; }
.ds-status { margin-left: 4px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.ds-zoom { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; }
.ds-zoom .ds-icon { min-height: 34px; height: 34px; width: 32px; }
.ds-zoom-v { border: 0; background: transparent; color: var(--ink); width: 54px; cursor: pointer; font-size: 12.5px; }

/* main area */
.ds-main { flex: 1; display: flex; min-height: 0; }
.ds-rail { width: var(--ds-rail); flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: var(--surface-1); border-right: 1px solid var(--line); overflow-y: auto; }
.ds-rail button { display: grid; justify-items: center; gap: 4px; border: 0; background: transparent; color: var(--ink-2); padding: 9px 2px; border-radius: 10px; cursor: pointer; font-size: 11px; font-weight: 500; }
.ds-rail button i { font-size: 18px; }
.ds-rail button:hover { background: var(--surface-2); color: var(--ink); }
.ds-rail button.on { background: var(--accent-soft); color: var(--accent-soft-ink); }
.ds-panel { width: 0; flex: none; overflow: hidden; background: var(--surface-1); border-right: 1px solid var(--line); transition: width .2s; }
.ds.panel-open .ds-panel { width: var(--ds-panel); overflow-y: auto; padding: 14px 14px 40px; }
.ds-ph { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ds-ph h3 { margin: 0; font-size: 16px; flex: 1; }
.ds-ph p { flex-basis: 100%; margin: 0; order: 3; }
.ds-panel-x { display: none; }
.ds-panel h4 { margin: 16px 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.ds-search { width: 100%; border: 1px solid var(--line); background: var(--surface-0); color: var(--ink); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; }
.ds-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ds-chip { flex: none; border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.ds-chip.on { background: var(--ink); color: var(--surface-1); border-color: var(--ink); }
.ds-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-tcard { position: relative; display: grid; gap: 4px; border: 1px solid var(--line); background: var(--surface-0); border-radius: 10px; padding: 0 0 6px; overflow: hidden; cursor: pointer; text-align: left; color: var(--ink); font-size: 12px; }
.ds-tcard[hidden] { display: none; }
.ds-tcard:hover { border-color: #0E7C66; box-shadow: var(--shadow-sm); }
.ds-tcard img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--surface-2); }
.ds-tcard span:last-child { padding: 0 8px; font-weight: 500; }
.ds-kind { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.65); color: #fff; border-radius: 6px; padding: 2px 6px; font-size: 10.5px; }
.ds-tlist { display: grid; gap: 8px; }
.ds-tadd { border: 1px solid var(--line); background: var(--surface-0); color: var(--ink); border-radius: 10px; padding: 12px; text-align: left; cursor: pointer; }
.ds-tadd:hover, .ds-tstyle:hover, .ds-el:hover { border-color: #0E7C66; }
.ds-tstyle { border: 1px solid var(--line); background: var(--surface-0); color: var(--ink); border-radius: 10px; padding: 14px 6px; cursor: pointer; }
.ds-fakebtn { background: #0E7C66; color: #fff; border-radius: 20px; padding: 6px 14px; }
.ds-egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.ds-el { aspect-ratio: 1; border: 1px solid var(--line); background: var(--surface-0); color: #0E7C66; border-radius: 10px; font-size: 22px; cursor: pointer; }
.ds-el.emoji { font-size: 26px; }
.ds-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ds-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ds-mitem { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: pointer; padding: 0; color: var(--ink-2); }
.ds-mitem img, .ds-mitem video { width: 100%; height: 100%; object-fit: cover; }
.ds-mitem i { position: absolute; right: 4px; bottom: 4px; color: #fff; text-shadow: 0 1px 2px #000; }
.ds-mitem i.big { position: static; font-size: 22px; color: var(--ink-2); text-shadow: none; }
.ds-sw { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-sw button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); cursor: pointer; }
.ds-color { position: relative; display: inline-grid; width: 34px; height: 34px; cursor: pointer; flex: none; }
.ds-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ds-color span { border-radius: 8px; border: 1px solid var(--line-strong); display: grid; place-items: center; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.ds-color.big span { background: var(--surface-2); color: var(--ink-2); }
.ds-card-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--surface-0); }
.ds-card-box h4 { margin: 0 0 8px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.ds-card-box textarea, .ds-form textarea, .ds-form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .ds-form select, .ds-panel textarea { width: 100%; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; }
.ds-card-box textarea:focus, .ds-form textarea:focus, .ds-form input:focus, .ds-form select:focus { outline: 2px solid rgba(14,124,102,.35); border-color: #0E7C66; }
.ds-logo { border: 1px dashed var(--line-strong); background: var(--surface-0); border-radius: 10px; padding: 10px; cursor: pointer; }
.ds-logo img { max-width: 120px; max-height: 80px; }
.ds-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ds-layers li { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 2px 4px; background: var(--surface-0); }
.ds-layers li.on { border-color: #0E7C66; background: var(--accent-soft); }
.ds-layers .ds-icon { width: 30px; min-height: 30px; font-size: 12px; }
.ds-lname { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); text-align: left; padding: 8px 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ds-lname i { color: var(--ink-3); width: 16px; }

/* stage */
.ds-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-ctx { display: flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 52px; background: var(--surface-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; flex: none; }
.ds-hint { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.ds-font { height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1); color: var(--ink); padding: 0 8px; max-width: 160px; flex: none; }
.ds-num { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.ds-num button { border: 0; background: var(--surface-2); color: var(--ink); width: 28px; cursor: pointer; }
.ds-num input { width: 52px; border: 0; text-align: center; background: var(--surface-1); color: var(--ink); -moz-appearance: textfield; }
.ds-num input::-webkit-inner-spin-button { display: none; }
.ds-mini { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); flex: none; }
.ds-mini input[type=range] { width: 80px; accent-color: #0E7C66; }
.ds-canvas-wrap { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 24px;
  background-color: var(--surface-2); background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 22px 22px; }
.ds-canvas-wrap.drop { outline: 3px dashed #0E7C66; outline-offset: -12px; }
.ds-artboard { position: relative; box-shadow: 0 4px 24px rgba(15,23,42,.18); background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%), linear-gradient(45deg, #e5e7eb 25%, #fff 25%, #fff 75%, #e5e7eb 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.ds-artboard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-artboard .canvas-container { position: relative !important; }

/* pages */
.ds-pages { flex: none; background: var(--surface-1); border-top: 1px solid var(--line); padding: 8px 12px; display: grid; gap: 6px; }
.ds-strip { display: flex; gap: 8px; overflow-x: auto; align-items: flex-end; padding-bottom: 2px; scrollbar-width: thin; }
.ds-page { display: grid; gap: 3px; justify-items: center; flex: none; }
.ds-thumb { position: relative; height: 64px; max-width: 120px; border: 2px solid var(--line); border-radius: 8px; background: #fff; padding: 0; cursor: pointer; overflow: hidden; }
.ds-page.on .ds-thumb { border-color: #0E7C66; box-shadow: 0 0 0 2px rgba(14,124,102,.25); }
.ds-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-thumb b { position: absolute; left: 3px; bottom: 2px; background: rgba(15,23,42,.75); color: #fff; font-size: 10px; border-radius: 4px; padding: 0 4px; }
.ds-vbadge { position: absolute; top: 3px; right: 3px; color: #fff; text-shadow: 0 1px 2px #000; font-size: 11px; }
.ds-dur { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; color: var(--ink-3); }
.ds-dur input { width: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-1); color: var(--ink); font-size: 11px; padding: 1px 3px; }
.ds-addpage { flex: none; height: 64px; width: 64px; border: 2px dashed var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 11px; }
.ds-pagebar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ds-format { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.ds-format select { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1); color: var(--ink); height: 32px; padding: 0 6px; }

/* popovers & menus */
.ds-pop { position: fixed; z-index: 3200; width: 280px; background: var(--surface-1); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 14px; display: grid; gap: 10px; font-size: 13px; }
.ds-pop label { display: grid; gap: 4px; color: var(--ink-2); }
.ds-pop input[type=range] { width: 100%; accent-color: #0E7C66; }
.ds-pop textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-0); color: var(--ink); padding: 8px; font: inherit; }
.ds-pop .ds-row { display: flex; align-items: center; gap: 8px; }
.ds-pop-x { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--ink-3); cursor: pointer; width: 28px; height: 28px; }
.ds-pop.menu { width: 230px; padding: 6px; gap: 0; }
.ds-pop.menu button { display: flex; gap: 10px; align-items: center; border: 0; background: none; color: var(--ink); padding: 10px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 13.5px; }
.ds-pop.menu button:hover { background: var(--surface-2); }
.ds-pop.menu i { width: 18px; color: var(--ink-3); }

/* dialogs (editor + posts) */
.ds-dialog-wrap { position: fixed; inset: 0; z-index: 3100; background: var(--scrim); display: grid; place-items: center; padding: 16px; animation: dsfade .15s; }
@keyframes dsfade { from { opacity: 0; } }
.ds-dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface-1); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow-md); }
.ds-dialog.wide { width: min(780px, 100%); }
.ds-dialog header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.ds-dialog header h3 { margin: 0; font-size: 17px; flex: 1; }
.ds-dialog-body { padding: 6px 16px 10px; overflow-y: auto; }
.ds-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 16px; flex-wrap: wrap; }
.ds-dialog footer:empty { display: none; }
.ds-form { display: grid; gap: 10px; }
.ds-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ds-form label.ds-row, .ds-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-form h4, .ds-dialog h4 { margin: 8px 0 0; font-size: 13px; color: var(--ink); }
.ds-form details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 6px 0; }
.ds-form details[open] { display: grid; gap: 10px; }
.ds-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ds-choice.four { grid-template-columns: repeat(4, 1fr); }
.ds-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ds-card { display: grid; justify-items: start; gap: 6px; text-align: left; border: 1px solid var(--line); background: var(--surface-0); color: var(--ink); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s, transform .15s; }
.ds-card:hover { border-color: #0E7C66; transform: translateY(-1px); }
.ds-card i { font-size: 22px; color: #0E7C66; }
.ds-card.big { min-height: 140px; }
.ds-card small { color: var(--ink-3); font-size: 12.5px; }
.ds-card[aria-disabled='true'] { opacity: .6; }
.ds-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ds-size { display: grid; gap: 4px; justify-items: start; text-align: left; border: 1px solid var(--line); background: var(--surface-0); color: var(--ink); border-radius: 12px; padding: 12px; cursor: pointer; }
.ds-size i { font-size: 20px; color: #0E7C66; }
.ds-size small { color: var(--ink-3); font-size: 12px; }
.ds-size.on, .ds-size:hover { border-color: #0E7C66; background: var(--accent-soft); }
.ds-wtgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.ds-wt { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--surface-0); color: var(--ink); border-radius: 10px; padding: 10px; cursor: pointer; }
.ds-wt:hover { border-color: #0E7C66; }
.ds-wt small { color: var(--ink-3); }

/* post panel */
.ds-captabs { display: flex; gap: 4px; overflow-x: auto; }
.ds-captabs button { position: relative; flex: none; border: 1px solid var(--line); background: var(--surface-0); color: var(--ink-2); border-radius: 8px; height: 34px; min-width: 36px; padding: 0 8px; cursor: pointer; }
.ds-captabs button.on { background: #0E7C66; border-color: #0E7C66; color: #fff; }
.ds-captabs .dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #F5B700; }
.ds-capmeta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.ds-capmeta span:first-child { margin-right: auto; }
.ds-nets { display: grid; gap: 6px; }
.ds-net { display: flex !important; align-items: center; gap: 8px !important; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--surface-0); color: var(--ink) !important; cursor: pointer; }
.ds-net small { flex-basis: 100%; color: var(--ink-3); font-weight: 400; padding-left: 26px; }
.ds-net i { width: 18px; text-align: center; }
.ds-net input[type=datetime-local] { width: auto !important; flex: 1; min-width: 180px; }
.ds-when { display: grid; gap: 6px; }
.ds-yt { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 12px; }
.ds-yt summary i { color: #ff0000; }
.ds-pubhead { display: flex; align-items: center; gap: 12px; }
.ds-pubhead img, .ds-pubhead video, .ds-pubhead > span { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.ds-pubhead div { display: grid; }
.ds-alt { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.ds-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-results li { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.ds-linkrow { display: flex; gap: 6px; }
.ds-linkrow input { flex: 1; }
.ds-sharelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ds-sharelist li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 4px 4px 12px; }
.ds-sharelist li > i { width: 20px; text-align: center; font-size: 17px; }

/* toasts */
#ds-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3300; display: grid; gap: 8px; width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.ds-toast { background: #0f172a; color: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 14px; animation: dsup .2s; transition: opacity .4s, transform .4s; pointer-events: auto; }
.ds-toast.error { background: #b91c1c; }
.ds-toast.out { opacity: 0; transform: translateY(8px); }
@keyframes dsup { from { opacity: 0; transform: translateY(8px); } }

/* Posts table: thumbnails and compact actions */
.post-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--surface-2); float: left; margin-right: 10px; display: grid; place-items: center; color: var(--ink-3); }
.post-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.post-actions .btn-sm span { display: inline; }

/* visuals page: designs strip */
.my-designs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.my-design { flex: none; width: 150px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); overflow: hidden; cursor: pointer; text-align: left; padding: 0; color: var(--ink); }
.my-design img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); display: block; }
.my-design span { display: block; padding: 6px 8px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* phones and small tablets */
@media (max-width: 900px) {
  .ds-top { padding: 6px 8px; gap: 2px; min-height: 52px; }
  .ds-top .ds-btn span, .ds-zoom, .ds-top .ds-sep, .ds-status { display: none; }
  .ds-top .ds-btn { padding: 0 10px; }
  .ds-name { width: auto; flex: 1; font-size: 14px; }
  .ds-main { flex-direction: column-reverse; }
  .ds-rail { width: auto; flex-direction: row; border-right: 0; border-top: 1px solid var(--line); padding: 4px; overflow-x: auto; }
  .ds-rail button { flex: 1 0 64px; padding: 6px 2px; }
  .ds-panel { position: fixed; left: 0; right: 0; bottom: 64px; width: auto !important; max-height: 0; z-index: 5; border: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(15,23,42,.18); transition: max-height .25s; }
  .ds.panel-open .ds-panel { max-height: 58vh; padding: 12px 14px 30px; }
  .ds-panel-x { display: inline-flex; }
  .ds-tgrid { grid-template-columns: repeat(3, 1fr); }
  .ds-canvas-wrap { padding: 12px; }
  .ds-pages { padding: 6px 8px; }
  .ds-thumb { height: 50px; }
  .ds-addpage { height: 50px; width: 50px; }
  .ds-choice, .ds-choice.four { grid-template-columns: 1fr 1fr; }
  .ds-card.big { min-height: 110px; }
  .ds-dialog-wrap { padding: 0; align-items: end; }
  .ds-dialog, .ds-dialog.wide { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .post-actions .btn-sm span { display: none; }
}
@media (max-width: 480px) {
  .ds-choice-row { grid-template-columns: 1fr; }
  .ds-tgrid { grid-template-columns: 1fr 1fr; }
}