/* Platform preview: controls and phone mock (js/feed-preview.js). Layout data lives in js/platforms.js. */
.fp-controls{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.fp-controls [hidden]{display:none!important}
.fp-row{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.fp-l{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.fp-controls select,.fp-controls textarea,.fp-controls input[type=text]{font:inherit;font-size:14px;color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:6px 9px;min-width:0}
.fp-controls select{flex:1 1 160px}
#tab-text .fp-controls .fp-chk,#tab-chat .fp-controls .fp-chk{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;color:var(--fg)}
.fp-chk input{accent-color:var(--accent);width:16px;height:16px}
.fp-edit summary{cursor:pointer;font-size:14px;font-weight:500}
.fp-edit[open]{display:flex;flex-direction:column;gap:6px}
.fp-edit textarea{width:100%;resize:vertical}
.fp-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
#tab-text .fp-controls .fp-nums label,#tab-chat .fp-controls .fp-nums label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.fp-nums input{width:100%}
.fp-hint,.fp-note{font-size:12.5px;color:var(--muted);margin:0}
.fp-checked{white-space:nowrap;opacity:.85}
.fp-stage{position:relative}
.fp-stage[hidden],.fp-note[hidden]{display:none}

/* phone screen: 390×844 CSS px, scaled to fit */
.fp-phone{position:absolute;top:0;left:0;width:390px;height:844px;transform-origin:0 0;border-radius:46px;overflow:hidden;background:#000;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.3;
  box-shadow:0 0 0 7px #0b0b0b,0 0 0 8px #3a3a3a,0 18px 40px rgba(0,0,0,.25)}
.fp-phone svg{display:block;flex:none}
.fp-media{position:absolute;left:0;top:0;width:390px;overflow:hidden;background:#000}
.fp-cover{position:absolute;pointer-events:none;z-index:1}
.fp-cover[hidden]{display:none}
.fp-cover i{position:absolute;background:repeating-linear-gradient(135deg,rgba(255,59,48,.42) 0 6px,rgba(255,59,48,.18) 6px 12px);box-shadow:inset 0 0 0 1px rgba(255,110,100,.9)}
.fp-shade{position:absolute;left:0;right:0;pointer-events:none;z-index:2}
.fp-shade.top{top:0;height:130px;background:linear-gradient(rgba(0,0,0,.38),transparent)}
.fp-shade.bot{height:280px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.fp-status{position:absolute;top:0;left:0;right:0;height:47px;display:flex;align-items:center;justify-content:space-between;padding:8px 28px 0 44px;z-index:5;font-size:16px}
.fp-sicons{display:flex;gap:6px;align-items:center}
.fp-sig{display:block;width:17px;height:11px;background:currentColor;clip-path:polygon(0 70%,22% 70%,22% 100%,0 100%,0 70%,26% 50%,48% 50%,48% 100%,26% 100%,26% 50%,52% 25%,74% 25%,74% 100%,52% 100%,52% 25%,78% 0,100% 0,100% 100%,78% 100%,78% 0)}
.fp-wifi{display:block;width:15px;height:11px;background:currentColor;clip-path:polygon(50% 100%,0 28%,22% 6%,50% 0,78% 6%,100% 28%)}
.fp-batt{display:block;width:25px;height:12px;border:1.5px solid currentColor;border-radius:4px;position:relative;opacity:.95}
.fp-batt::after{content:"";position:absolute;top:1.5px;bottom:1.5px;left:1.5px;right:5px;background:currentColor;border-radius:1.5px}
.fp-it{display:inline-flex;align-items:center;gap:6px;position:relative}
.fp-it.dim{opacity:.72}
.fp-word{font-size:16px;font-weight:600}
.fp-word.b{font-weight:700}
.fp-count{font-size:12.5px;font-weight:600}
.fp-av{display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;flex:none;color:#fff;font-weight:700}
.fp-av img{width:100%;height:100%;object-fit:contain;padding:12%;box-sizing:border-box}

/* fullscreen (Reels, TikTok) */
.fp-topbar{position:absolute;top:47px;left:0;right:0;height:44px;display:flex;align-items:center;padding:0 14px;z-index:4}
.fp-topbar .l,.fp-topbar .r{display:flex;gap:16px;align-items:center;flex:1}
.fp-topbar .r{justify-content:flex-end}
.fp-topbar .c{display:flex;gap:18px;align-items:center;justify-content:center}
.fp-topbar .c .fp-it.on .fp-word{font-weight:700;box-shadow:0 3px 0 -0.5px #fff;padding-bottom:4px}
.fp-full .fp-topbar svg,.fp-full .fp-rail svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.fp-rail{position:absolute;right:6px;width:58px;display:flex;flex-direction:column;align-items:center;gap:18px;z-index:4}
.fp-rail .fp-it{flex-direction:column;gap:3px}
.fp-full .fp-count,.fp-full .fp-meta{text-shadow:0 1px 2px rgba(0,0,0,.45)}
.fp-full .fp-av{box-shadow:0 0 0 1.5px rgba(255,255,255,.95)}
.fp-plusbadge{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#FE2C55;display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1}
.fp-disc .fp-av{box-shadow:0 0 0 7px #1d1d1d,0 0 0 8px #444;animation:fp-spin 5s linear infinite}
@keyframes fp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fp-disc .fp-av{animation:none}}
.fp-thumb{width:30px;height:30px;border-radius:7px;border:2px solid #fff;overflow:hidden;background:#333}
.fp-thumb img{width:100%;height:100%;object-fit:cover}
.fp-meta{position:absolute;left:14px;right:80px;z-index:4;display:flex;flex-direction:column;gap:7px}
.fp-who{display:flex;align-items:center;gap:9px;font-size:15px}
.fp-btn{border:1px solid rgba(255,255,255,.85);border-radius:8px;padding:3px 10px;font-weight:600;font-size:13px}
.fp-cap,.fp-line{margin:0;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.fp-audio{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;min-width:0}
.fp-audio span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-nav{position:absolute;left:0;right:0;bottom:0;height:83px;padding:10px 12px 30px;display:flex;justify-content:space-around;align-items:flex-start;background:#000;z-index:5;border-top:1px solid rgba(255,255,255,.12)}
.fp-nav .fp-it{flex-direction:column;gap:3px;opacity:.82}
.fp-nav .fp-it.on{opacity:1}
.fp-nav.labels{padding-top:7px}
.fp-navlbl{font-size:10px;font-weight:500}
.fp-it.fp-create{width:44px;height:30px;border-radius:9px;background:#fff;color:#000;display:grid;place-items:center;box-shadow:-3px 0 0 #25F4EE,3px 0 0 #FE2C55;opacity:1;margin-top:3px}
.fp-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:currentColor;opacity:.9;z-index:6}

/* feed posts */
.fp-feed{background:#fff;color:#0c0c0c}
.fp-feed.dark{background:#000;color:#f2f2f2}
.fp-feed .fp-status{background:inherit}
.fp-scroll{position:absolute;top:47px;left:0;right:0;overflow:hidden}
.fp-bar{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.fp-bar .r{display:flex;gap:20px}
.fp-wordmark{font-size:25px;font-weight:700;letter-spacing:-.6px}
.fp-post{display:flex;flex-direction:column}
.fp-ph{display:flex;align-items:center;gap:10px;padding:8px 12px}
.fp-pn{display:flex;flex-direction:column;flex:1;min-width:0;font-size:14px}
.fp-pn small{font-size:12px;opacity:.65;display:flex;align-items:center;gap:3px}
.fp-ph .r{display:flex;gap:14px;opacity:.8}
.fp-feed .fp-media{position:relative}
.fp-feed .fp-line{padding:0 12px;margin:0 0 6px;font-size:14px}
.fp-feed .fp-ph + .fp-line{margin:0 0 10px}
.fp-line.muted{opacity:.58}
.fp-line.small{font-size:11px}
.fp-actions{display:flex;justify-content:space-between;padding:10px 12px 8px}
.fp-actions .l{display:flex;gap:16px}
.fp-actions .fp-count{font-size:14px}
.fp-stats{display:flex;justify-content:space-between;padding:9px 12px;font-size:13px;opacity:.7}
.fp-buttons{display:flex;justify-content:space-around;padding:8px 0 10px;border-top:1px solid rgba(128,128,128,.28);margin:0 12px;font-size:14px;font-weight:600;opacity:.75}
.fp-buttons span{display:flex;align-items:center;gap:6px}
.fp-next{margin-top:8px;border-top:6px solid rgba(128,128,128,.14)}
.fp-next .fp-pn i{display:block;height:9px;border-radius:5px;background:rgba(128,128,128,.25);width:120px;margin:3px 0}
.fp-next .fp-pn i+i{width:70px}
.fp-av.ghost{background:rgba(128,128,128,.25)}
.fp-ghostmedia{height:390px;background:rgba(128,128,128,.14)}
.fp-feed .fp-nav{background:inherit;color:inherit;border-top:1px solid rgba(128,128,128,.25)}