.publication-layer { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; color:#fff; text-shadow:0 1px 3px #000; font-family:'Tajawal',sans-serif; font-size:calc(var(--publication-width,300px) * .035); }
.publication-layer[hidden], .publication-tools[hidden], .publication-layer [hidden], .publication-tools [hidden] { display:none !important; }
.publication-guide { position:absolute; left:16%; top:18%; width:68%; height:54%; border:1px dashed #e8cc8b; background:rgba(224,195,132,.035); box-sizing:border-box; }
.publication-guide > span { position:absolute; top:2px; left:3px; background:rgba(8,12,18,.75); padding:2px 4px; border-radius:3px; font-size:.78em; color:#f6e3b6; }
.social-interface { position:absolute; inset:0; }
.social-shade-top { position:absolute; inset:0 0 auto; height:17%; background:linear-gradient(#0008,transparent); }
.social-shade-bottom { position:absolute; inset:auto 0 0; height:27%; background:linear-gradient(transparent,#000b); }
.social-status { position:absolute; top:2%; left:5%; right:5%; display:flex; justify-content:space-between; font-size:.78em; font-weight:700; direction:ltr; }
.social-island { width:22%; height:1em; background:#050505; border-radius:99px; }
.social-heading { position:absolute; top:7%; left:6%; right:6%; display:flex; justify-content:space-between; font-size:1.25em; font-weight:800; }
.social-actions { position:absolute; bottom:24%; right:4%; display:flex; flex-direction:column; gap:.65em; align-items:center; }
.social-actions svg { width:1.85em; height:1.85em; fill:none; stroke:currentColor; stroke-width:1.7; }
.social-actions small { font-size:.65em; margin-top:-.7em; }
.social-caption { position:absolute; bottom:8%; left:5%; right:18%; text-align:left; direction:ltr; line-height:1.55; }
.social-caption strong { display:block; margin-bottom:.45em; }
.social-caption p { direction:rtl; text-align:left; margin:0; }
.social-footer { position:absolute; bottom:1.7%; left:5%; right:5%; display:flex; justify-content:space-between; font-size:.75em; border-top:1px solid #ffffff40; padding-top:.5em; }
.social-interface[data-platform="tiktok"] .social-actions { right:auto; left:4%; }
.social-interface[data-platform="tiktok"] .social-caption { left:18%; right:5%; text-align:right; }
.social-interface[data-platform="tiktok"] .social-caption p { text-align:right; }
.card-drag-handle { position:absolute; box-sizing:border-box; pointer-events:auto; touch-action:none; cursor:grab; border:2px dashed #f6d485; border-radius:8px; background:transparent; padding:0; color:#ffe6a8; }
.card-drag-handle:active { cursor:grabbing; }
.card-drag-handle:focus-visible { outline:2px solid white; outline-offset:3px; }
.card-drag-handle::after { content:'↔'; position:absolute; bottom:-1.55em; left:50%; transform:translateX(-50%); background:#172333; border:1px solid #f6d485; border-radius:5px; padding:0 .4em; font-size:1.1em; line-height:1.3; }
.publication-tools { width:100%; margin-top:12px; padding-top:12px; border-top:1px solid rgb(var(--ui-slate-600) / .6); }
.publication-buttons { display:flex; gap:6px; flex-wrap:wrap; }
.publication-buttons button, .card-placement-actions button { min-height:44px; flex:1 1 auto; border-radius:9px; border:1px solid rgb(var(--ui-slate-600)); background:rgb(var(--ui-slate-900)); color:rgb(var(--ui-slate-200)); padding:8px; font:inherit; font-size:12px; }
.publication-buttons button[aria-pressed="true"], .card-placement-actions button[aria-pressed="true"] { color:rgb(var(--ui-ink)); background:rgb(var(--ui-brand-500)); border-color:rgb(var(--ui-brand-400)); }
.publication-tools p { margin-top:8px; color:rgb(var(--ui-slate-400)); font-size:11px; line-height:1.6; }
.card-placement-actions { display:flex; gap:6px; flex-wrap:wrap; }
.card-placement-controls { border-top:1px solid rgb(var(--ui-slate-600)); margin-top:14px; padding-top:12px; font-size:12px; }
.card-placement-controls label { display:flex; gap:8px; align-items:center; justify-content:space-between; color:rgb(var(--ui-slate-300)); }
.card-placement-controls input[type="range"] { height:36px; display:block; }
.card-placement-controls input[type="checkbox"] { width:18px; height:18px; accent-color:rgb(var(--ui-brand-500)); }
.card-placement-controls .card-limit-label { min-height:44px; justify-content:flex-start; }
.card-placement-controls p { color:rgb(var(--ui-slate-400)); font-size:11px; line-height:1.7; }
.publication-buttons button:disabled, .card-placement-actions button:disabled { opacity:.4; cursor:not-allowed; }
.publication-buttons button:focus-visible, .card-placement-actions button:focus-visible { outline:2px solid rgb(var(--ui-brand-400)); outline-offset:3px; }
#previewFloatingDock .publication-tools, #previewFloatingDock .card-drag-handle, #previewFloatingDock .publication-guide > span { display:none !important; }

/* Compact landscape chrome leaves the picture and caption readable. */
.social-interface[data-layout="wide"] .social-status { display:none; }
.social-interface[data-layout="wide"] .social-heading { top:4%; font-size:1.1em; }
.social-interface[data-layout="wide"] .social-actions { bottom:22%; gap:.4em; }
.social-interface[data-layout="wide"] .social-actions svg { width:1.5em; height:1.5em; flex-shrink:0; }
.social-interface[data-layout="wide"] .social-caption { bottom:11%; line-height:1.35; }
.social-interface[data-layout="wide"] .social-caption strong { margin-bottom:.15em; }
.social-interface[data-layout="square"] .social-heading { top:8%; }