/* ============================================================================
   Bursty — native media feed.  Standalone /bursty page.
   Ported from the BurstPost / vcom3 Home prototypes into the module system,
   recolored to the app's calm indigo palette. Card styles are global
   (.burst-*) but only rendered on /bursty; page chrome is scoped to
   body[data-page="bursty"]. The home bottom nav is the portal vc-dock.
   ============================================================================ */

@keyframes bpPanel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Module-owned design tokens ───────────────────────────────────────────
   Bursty owns its own visual identity (calm indigo), scoped to its surfaces
   only (.bursty-wrap = the page). These are concrete
   self-contained values — the module does NOT borrow the shell palette, so it
   can be restyled in isolation without affecting any other module.
   ────────────────────────────────────────────────────────────────────────── */
.bursty-wrap{
  --bg:#0c0e14;
  --panel:#14161f;
  --accent:#6571e8;
  --accent2:#818bef;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.05);
  --text-3:#7a8294;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --radius-lg:22px;
}

/* ── Bursty page chrome ───────────────────────────────────────────────────── */
body[data-page="bursty"]{ --b-accent:#6571e8; --b-accent2:#818bef; }
body[data-page="bursty"] .bursty-wrap{ min-height:calc(100vh - 64px); padding:24px 0 130px; background:var(--bg); }
body[data-page="bursty"] .bursty-inner{ max-width:1320px; margin:0 auto; padding:0 40px; }
body[data-page="bursty"] .bursty-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
body[data-page="bursty"] .bursty-mark{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#6571e8,#46b08f); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
body[data-page="bursty"] .bursty-mark svg{ width:19px; height:19px; }
body[data-page="bursty"] .bursty-head h1{ font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0; }
body[data-page="bursty"] .bursty-head .sub{ font-size:12.5px; color:var(--text-3); }
body[data-page="bursty"] .bursty-create{ display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--radius-lg); background:var(--panel); border:1px solid var(--line); margin-bottom:26px; cursor:pointer; transition:border-color .18s, transform .15s; }
body[data-page="bursty"] .bursty-create:hover{ border-color:var(--line-2); transform:translateY(-2px); }
body[data-page="bursty"] .bursty-create-ico{ width:52px; height:52px; border-radius:15px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
body[data-page="bursty"] .bursty-create-ico svg{ width:24px; height:24px; }
body[data-page="bursty"] .bursty-create-tx{ flex:1; }
body[data-page="bursty"] .bursty-create-tx strong{ display:block; font-size:16px; font-weight:700; letter-spacing:-.01em; }
body[data-page="bursty"] .bursty-create-tx span{ font-size:12.5px; color:var(--text-3); }
body[data-page="bursty"] .bursty-create .btn{ flex:none; }
body[data-page="bursty"] .bursty-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:1100px){ body[data-page="bursty"] .bursty-grid{ grid-template-columns:repeat(2,1fr); } body[data-page="bursty"] .bursty-inner{ padding:0 24px; } }
@media(max-width:680px){ body[data-page="bursty"] .bursty-grid{ grid-template-columns:1fr; } }

/* ── Burst card (4-panel pager) ───────────────────────────────────────────── */
.burst-card{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:18px; background:#12141b; box-shadow:0 16px 44px -22px rgba(0,0,0,.6); cursor:pointer; font-family:var(--font); border:1px solid var(--line); }
.burst-cover{ position:absolute; inset:0; }
.burst-grad-top{ position:absolute; top:0; left:0; right:0; height:26%; background:linear-gradient(180deg,rgba(4,5,9,.42),transparent); }
.burst-grad-bot{ position:absolute; bottom:0; left:0; right:0; height:46%; background:linear-gradient(0deg,rgba(4,5,9,.82),rgba(4,5,9,.24) 58%,transparent); }
.burst-overlay{ position:absolute; inset:0; transition:opacity .35s; }
.burst-head{ position:absolute; top:14px; left:14px; right:14px; display:flex; align-items:center; gap:10px; }
.burst-av{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; flex:none; }
.burst-head-tx{ flex:1; min-width:0; }
.burst-head-tx .nm{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.1; text-shadow:0 1px 6px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.burst-head-tx .mt{ font-size:10.5px; color:rgba(255,255,255,.74); font-family:ui-monospace,monospace; }
.burst-kind{ color:#06070a; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:4px; flex:none; }
.burst-foot{ position:absolute; left:14px; right:14px; bottom:12px; }
.burst-caption{ font-size:13px; color:#fff; line-height:1.35; text-shadow:0 1px 8px rgba(0,0,0,.7); margin-bottom:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.burst-music{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.burst-music button{ width:36px; height:36px; border-radius:10px; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; }
.burst-music .play{ background:var(--accent); }
.burst-music .stop{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.burst-music .stop div{ width:11px; height:11px; border-radius:2px; background:currentColor; }
.burst-music .bar{ flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.22); overflow:hidden; }
.burst-music .bar i{ display:block; height:100%; background:#fff; transition:width .4s; }
.burst-music .t{ font-family:ui-monospace,monospace; font-size:10.5px; color:rgba(255,255,255,.8); flex:none; }
.burst-music .song{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:rgba(255,255,255,.8); flex:none; max-width:140px; }
.burst-music .song span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.burst-stats{ display:flex; align-items:center; gap:18px; }
.burst-stats .st{ display:flex; align-items:center; gap:6px; color:#fff; font-size:12.5px; }
.burst-stats .st svg{ width:16px; height:16px; }
.burst-remix{ margin-left:auto; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); color:#fff; cursor:pointer; font-weight:600; font-size:12px; padding:7px 14px; border-radius:9px; }
.burst-remix svg{ width:13px; height:13px; }

.burst-eye{ position:absolute; top:11px; right:13px; z-index:22; width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.22); background:rgba(8,9,13,.45); backdrop-filter:blur(6px); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.burst-eye svg{ width:16px; height:16px; }

/* panels */
.burst-panel{ position:absolute; inset:0; background:rgba(18,20,27,.86); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); animation:bpPanel .25s ease; display:flex; flex-direction:column; padding:16px; }
.burst-panel-head{ display:flex; align-items:center; gap:8px; flex:none; }
.burst-panel-head svg{ width:17px; height:17px; }
.burst-panel-head .ttl{ font-weight:700; font-size:15px; color:#fff; }
.burst-panel-head .rl{ margin-left:auto; font-size:10.5px; color:rgba(255,255,255,.55); font-family:ui-monospace,monospace; }
.burst-following-list{ flex:1; min-height:0; overflow-y:auto; margin-top:11px; display:flex; flex-direction:column; gap:6px; }
.burst-friend{ display:flex; align-items:center; gap:11px; padding:8px; border-radius:12px; background:rgba(255,255,255,.05); }
.burst-friend .fav{ position:relative; flex:none; }
.burst-friend .fav .c{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.burst-friend .fav .d{ position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; border:2px solid #14161c; }
.burst-friend .fnm{ flex:1; min-width:0; }
.burst-friend .fnm .a{ font-size:13px; font-weight:600; color:#fff; }
.burst-friend .fnm .b{ font-size:11px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.burst-friend .fbtn{ flex:none; color:#fff; cursor:pointer; font-weight:600; font-size:11px; padding:6px 12px; border-radius:8px; }
.burst-reach-stats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:14px; flex:none; }
.burst-reach-stat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:11px 12px; }
.burst-reach-stat .v{ font-weight:700; font-size:19px; color:#fff; line-height:1; }
.burst-reach-stat .k{ font-size:10px; color:rgba(255,255,255,.6); margin-top:3px; text-transform:uppercase; letter-spacing:.05em; }
.burst-reach-note{ margin-top:16px; font-size:10.5px; color:rgba(255,255,255,.55); font-family:ui-monospace,monospace; flex:none; }
.burst-reach-chart{ flex:1; min-height:38px; display:flex; align-items:flex-end; gap:3px; margin-top:8px; }
.burst-reach-chart i{ flex:1; min-width:0; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--accent),rgba(101,113,232,.22)); }
.burst-trend-list{ flex:1; min-height:0; overflow-y:auto; margin-top:14px; display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; }
.burst-tag{ display:inline-flex; align-items:center; padding:9px 14px; border-radius:10px; background:rgba(255,255,255,.06); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }

/* pager */
.burst-dots{ position:absolute; top:11px; left:50%; transform:translateX(-50%); z-index:22; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(8,9,13,.5); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); }
.burst-dots button{ height:7px; border-radius:7px; border:0; cursor:pointer; padding:0; transition:all .2s; background:rgba(255,255,255,.42); }
.burst-dots button.on{ width:20px; background:#fff; }
.burst-dots button:not(.on){ width:7px; }
.burst-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:21; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(8,9,13,.42); backdrop-filter:blur(6px); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.burst-arrow svg{ width:17px; height:17px; }
.burst-arrow.prev{ left:9px; }
.burst-arrow.next{ right:9px; }

/* ============================================================================
   Slice 1 additions — real media layer, empty states, Quick Bursty composer,
   and the fullscreen burst player. Module-owned; bursty's own indigo identity.
   ============================================================================ */
@keyframes burstyPop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes burstyFade{from{opacity:0}to{opacity:1}}
body.bursty-noscroll{ overflow:hidden; }

/* media layer + misc card bits */
.burst-media{ z-index:0; }
.burst-music .ic{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.burst-music .ic svg{ width:15px; height:15px; }
.burst-empty{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:18px; color:rgba(255,255,255,.62); font-size:13px; line-height:1.5; }
body[data-page="bursty"] .bursty-grid > .bursty-empty{ grid-column:1/-1; min-height:160px; border:1px dashed var(--line); border-radius:var(--radius-lg); background:var(--panel); color:var(--text-3); }
body[data-page="bursty"] .bursty-grid > .bursty-empty strong{ color:#e7e9f0; }

/* ── Modal shell (Quick Bursty) ──────────────────────────────────────────── */
.bursty-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  --bg:#0c0e14; --panel:#14161f; --panel-2:#1b1e29; --accent:#6571e8; --accent2:#818bef;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --text:#eef0f6; --text-2:#aeb4c2; --text-3:#7a8294;
  --radius-lg:22px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.bursty-scrim{ position:absolute; inset:0; background:rgba(3,4,7,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:burstyFade .2s ease; }
.bursty-sheet{ position:relative; width:580px; max-width:94vw; max-height:92vh; overflow-y:auto; background:var(--panel);
  border:1px solid var(--line-2); border-radius:var(--radius-lg); box-shadow:0 40px 110px rgba(0,0,0,.62); animation:burstyPop .22s cubic-bezier(.2,.7,.2,1); }
.bursty-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line); }
.bursty-sheet-head .hl{ display:flex; align-items:center; gap:11px; }
.bursty-sheet-head .ic{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; background:var(--panel-2); }
.bursty-sheet-head .ic.accent{ background:var(--accent); }
.bursty-sheet-head .ic svg{ width:19px; height:19px; }
.bursty-sheet-head strong{ display:block; font-size:17px; font-weight:700; color:var(--text); line-height:1.1; }
.bursty-sheet-head .hl span span,.bursty-sheet-head .hl div span{ font-size:11.5px; color:var(--text-3); }
.bursty-x{ width:32px; height:32px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.bursty-x svg{ width:15px; height:15px; }
.bursty-sheet-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-top:1px solid var(--line); }

/* ── Quick Bursty body ───────────────────────────────────────────────────── */
.qb-prev{ position:relative; aspect-ratio:16/9; margin:18px 22px 0; border-radius:14px; overflow:hidden; background:var(--panel-2); border:1px solid var(--line-2); }
.qb-prev-cap{ position:absolute; left:14px; right:14px; bottom:14px; font-weight:600; font-size:14px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.7); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qb-body{ padding:18px 22px 4px; }
.qb-label{ font-size:11px; color:var(--text-3); margin:0 0 9px; }
.qb-types{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:18px; }
.qb-type{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:13px 6px; border:1.5px solid var(--line-2); border-radius:12px; cursor:pointer; background:var(--panel-2); color:var(--text-2); transition:.15s; }
.qb-type:hover{ border-color:var(--accent2); color:var(--text); }
.qb-type.on{ border-color:var(--accent); color:var(--text); background:color-mix(in srgb,var(--accent) 16%,var(--panel-2)); }
.qb-type .g{ font-size:18px; line-height:1; }
.qb-type span:last-child{ font-weight:600; font-size:12.5px; }
.qb-backdrops{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.qb-bd{ aspect-ratio:16/9; border-radius:10px; cursor:pointer; padding:0; border:2px solid transparent; transition:border-color .15s; }
.qb-bd:hover{ border-color:var(--line-2); }
.qb-bd.on{ border-color:var(--accent); }
.qb-upload{ display:flex; align-items:center; gap:11px; padding:14px 15px; border-radius:13px; background:var(--panel-2); border:1px dashed var(--line-2); cursor:pointer; margin-bottom:14px; }
.qb-upload:hover{ border-color:var(--accent); }
.qb-upload .ic{ width:34px; height:34px; border-radius:9px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; }
.qb-upload .ic svg{ width:20px; height:20px; }
.qb-upload strong{ display:block; font-weight:600; font-size:13.5px; color:var(--text); }
.qb-upload span{ font-size:11px; color:var(--text-3); }
.qb-tracks{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.qb-track{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); cursor:pointer; text-align:left; }
.qb-track.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--panel-2)); }
.qb-track .ic{ width:32px; height:32px; border-radius:9px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; }
.qb-track .ic svg{ width:16px; height:16px; }
.qb-track span span,.qb-track > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.qb-track strong{ font-weight:600; font-size:13px; color:var(--text); }
.qb-track em{ font-style:normal; font-size:11px; color:var(--text-3); }
.qb-mediachip{ display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:12px; background:color-mix(in srgb,var(--accent) 10%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); margin-bottom:14px; }
.qb-mediachip .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); flex:none; }
.qb-mediachip .nm{ flex:1; font-size:12px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qb-mediachip button{ background:transparent; border:0; color:var(--text-3); cursor:pointer; font-size:12px; }
.qb-caption{ width:100%; padding:11px 12px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); font-family:inherit; font-size:13px; resize:vertical; }
.qb-caption:focus{ outline:none; border-color:var(--accent); }

/* ── Fullscreen burst player ─────────────────────────────────────────────── */
.burst-player{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; --accent:#6571e8;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.bp-scrim{ position:absolute; inset:0; background:rgba(3,4,7,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:burstyFade .2s ease; }
.bp-stage{ position:relative; display:flex; align-items:flex-end; gap:16px; max-width:94vw; max-height:92vh; animation:burstyPop .22s cubic-bezier(.2,.7,.2,1); }
.bp-frame{ position:relative; height:min(86vh,820px); max-width:92vw; overflow:hidden; background:#0b0c12; box-shadow:0 40px 120px rgba(0,0,0,.7); }
.bp-meta{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:18px; pointer-events:none; }
.bp-meta > *{ pointer-events:auto; }
.bp-head{ display:flex; align-items:center; gap:10px; }
.bp-head .burst-av{ width:38px; height:38px; }
.bp-head .nm{ font-size:14px; font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.bp-head .mt{ font-size:11px; color:rgba(255,255,255,.74); }
.bp-tags{ font-family:ui-monospace,monospace; font-size:12px; color:var(--accent2,#818bef); }
.bp-links{ display:flex; flex-wrap:wrap; gap:8px; }
.bp-cta{ align-self:flex-start; }
.bp-side{ display:flex; flex-direction:column; align-items:center; gap:14px; padding-bottom:8px; }
.bp-act{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(18,20,27,.7); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bp-act svg{ width:20px; height:20px; }
.bp-act.danger{ border-color:rgba(229,84,107,.5); color:#ff7d8f; }
.bp-stat{ display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:11px; }
.bp-stat svg{ width:24px; height:24px; }
@media(max-width:680px){ .bp-stage{ flex-direction:column; align-items:center; } .bp-side{ flex-direction:row; } .bp-frame{ height:auto; max-height:74vh; width:92vw; } }

/* ============================================================================
   Slice 2 — Bursty Studio (full composer). Module-owned indigo identity,
   scoped to .studio-wrap so it never leaks into other modules.
   ============================================================================ */
body[data-page="bursty"] .bursty-creates{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
body[data-page="bursty"] .bursty-creates .bursty-create{ margin-bottom:0; }
body[data-page="bursty"] .bursty-create.studio-cta{ background:linear-gradient(130deg,#1a1030,#2a1240 60%,#3a1a2e); border-color:rgba(255,92,174,.25); }
body[data-page="bursty"] .bursty-create.studio-cta:hover{ border-color:rgba(255,92,174,.5); }
body[data-page="bursty"] .bursty-create-ico.spark{ background:linear-gradient(135deg,#7c6cff,#ff5cae); }
body[data-page="bursty"] .bursty-create-tx .tag{ font-style:normal; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.18); color:#fff; padding:2px 6px; border-radius:5px; margin-left:6px; vertical-align:middle; }
@media(max-width:760px){ body[data-page="bursty"] .bursty-creates{ grid-template-columns:1fr; } }
.qb-more{ display:flex; align-items:center; gap:7px; background:transparent; border:0; color:var(--text-2); cursor:pointer; font-family:inherit; font-weight:600; font-size:12.5px; }
.qb-more .ic{ display:flex; width:14px; height:14px; color:var(--accent); }
.qb-more .ic svg{ width:14px; height:14px; }

/* shell */
.studio-wrap{ position:fixed; inset:0; z-index:1300; animation:burstyFade .2s ease;
  --bg:#0c0e14; --bg-1:#101219; --panel:#14161f; --panel-2:#1b1e29; --bg-3:#0b0c12; --accent:#6571e8; --accent2:#818bef;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --text:#eef0f6; --text-2:#aeb4c2; --text-3:#7a8294;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.studio{ position:absolute; inset:0; background:var(--bg); display:flex; flex-direction:column; }
.studio-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.studio-head .hl{ display:flex; align-items:center; gap:11px; }
.studio-head .ic{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#7c6cff,#ff5cae); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.studio-head .ic svg{ width:18px; height:18px; }
.studio-head strong{ display:block; font-weight:700; font-size:16px; color:var(--text); line-height:1.1; }
.studio-head .hl span span,.studio-head .hl div span{ font-size:11.5px; color:var(--text-3); }
.studio-head .acts{ display:flex; align-items:center; gap:10px; }
.studio-head .acts button{ background:var(--panel-2); color:var(--text-2); border:1px solid var(--line-2); cursor:pointer; font-family:inherit; font-weight:600; font-size:13px; padding:10px 16px; border-radius:11px; }
.studio-head .acts button.btn.primary{ border:0; }
.studio-body{ flex:1; display:flex; min-height:0; }

/* rail */
.studio-rail{ width:148px; flex:0 0 auto; border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:6px; background:var(--bg-1); }
.studio-tool{ text-align:left; border:1px solid transparent; cursor:pointer; font-family:inherit; font-weight:600; font-size:13.5px; padding:11px 14px; border-radius:11px; transition:.2s; background:transparent; color:var(--text-2); }
.studio-tool:hover{ color:var(--text); }
.studio-tool.on{ background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--accent2); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }

/* canvas */
.studio-canvas{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:28px; background:radial-gradient(120% 120% at 50% 0%,var(--bg-1),var(--bg)); }
.studio-frame{ position:relative; overflow:hidden; max-width:100%; max-height:100%; background:var(--bg-3); box-shadow:0 30px 90px rgba(0,0,0,.6); border:1px solid var(--line-2); }
.studio-mediawrap{ position:absolute; inset:0; }
.studio-cgrad{ height:46%; }
.studio-textlayer{ position:absolute; inset:0; }
.studio-text{ position:absolute; }
.studio-drop{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.82); pointer-events:none; text-align:center; padding:16px; }
.studio-drop .ic{ width:42px; height:42px; opacity:.8; }
.studio-drop .ic svg{ width:42px; height:42px; }
.studio-drop .t{ font-weight:600; font-size:14px; }
.studio-drop .s{ font-size:11.5px; color:rgba(255,255,255,.6); }
.studio-musicchip{ position:absolute; left:14px; bottom:16px; display:flex; align-items:center; gap:8px; max-width:78%; background:rgba(8,9,13,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18); padding:6px 12px 6px 9px; border-radius:999px; pointer-events:none; }
.studio-musicchip .ic{ display:flex; width:14px; height:14px; color:#fff; }
.studio-musicchip .ic svg{ width:14px; height:14px; }
.studio-musicchip span:last-child{ font-size:11.5px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* contextual panel */
.studio-panel{ width:362px; flex:0 0 auto; border-left:1px solid var(--line); overflow-y:auto; padding:20px 22px; background:var(--bg-1); }
.sp-title{ font-weight:700; font-size:15px; color:var(--text); margin-bottom:4px; }
.sp-sub{ font-size:12px; color:var(--text-3); margin-bottom:16px; }
.sp-titlerow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.sp-mono{ font-family:ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin:14px 0 9px; }
.sp-mini{ font-size:11px; color:var(--text-3); margin:14px 0 7px; }
.sp-mini:first-child,.sp-mono:first-child{ margin-top:0; }
.sp-mini .o,.o{ opacity:.7; }
.studio-panel .qb-upload{ margin-bottom:10px; }
.sp-clear,.sp-add,.sp-addlink{ background:transparent; border:0; color:var(--text-3); cursor:pointer; font-family:inherit; font-size:12px; }
.sp-add{ background:var(--accent); color:#fff; font-weight:700; padding:8px 14px; border-radius:9px; }
.sp-addlink{ width:100%; background:var(--panel-2); border:1px dashed var(--line-2); color:var(--text-2); font-weight:600; font-size:12.5px; padding:11px; border-radius:11px; margin-bottom:18px; }
.sp-hint{ font-size:11px; color:var(--text-3); background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; line-height:1.4; margin-top:6px; }
.sp-prompt,.sp-caption,.sp-cta,.sp-hashtags,.sp-href,.sp-llabel,.sp-lurl,.sp-linktitle{ width:100%; padding:11px 12px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); font-family:inherit; font-size:13px; resize:vertical; outline:none; }
.sp-prompt{ margin-bottom:10px; }
.sp-hashtags{ font-family:ui-monospace,monospace; font-size:12px; }
.sp-href{ font-family:ui-monospace,monospace; font-size:11.5px; }
.sp-prompt:focus,.sp-caption:focus,.sp-cta:focus,.sp-hashtags:focus,.sp-href:focus,.sp-linktitle:focus{ border-color:var(--accent); }
.sp-generate{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#7c6cff,#ff5cae); color:#fff; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; padding:11px; border-radius:11px; margin-bottom:8px; }
.sp-generate .ic{ display:flex; width:15px; height:15px; }
.sp-generate .ic svg{ width:15px; height:15px; }
.sp-backdrops{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sp-bd{ aspect-ratio:9/16; border-radius:9px; cursor:pointer; padding:0; border:2px solid transparent; transition:border-color .15s; }
.sp-bd:hover{ border-color:var(--line-2); }
.sp-bd.on{ border-color:var(--accent); }
.sp-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.sp-thumb{ position:relative; width:62px; height:62px; border-radius:10px; overflow:hidden; border:1px solid var(--line-2); }
.sp-thumb img{ width:100%; height:100%; object-fit:cover; }
.sp-thumb button{ position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; border:0; background:rgba(4,5,9,.7); color:#fff; cursor:pointer; font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; }
.sp-layouts,.sp-kinds{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.sp-layout,.sp-kind{ border:1px solid var(--line-2); cursor:pointer; font-family:inherit; font-weight:600; font-size:12.5px; padding:9px 14px; border-radius:10px; background:var(--panel-2); color:var(--text-2); }
.sp-kind{ flex:1; text-align:center; }
.sp-layout.on,.sp-kind.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.sp-aspects{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sp-aspect{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 10px; border:1.5px solid var(--line-2); border-radius:13px; cursor:pointer; background:var(--panel-2); color:var(--text-2); }
.sp-aspect.on{ border-color:var(--accent); color:var(--text); }
.sp-aspect .ar{ width:34px; max-height:46px; background:currentColor; opacity:.5; border-radius:3px; }
.sp-aspect em{ font-style:normal; font-weight:600; font-size:12.5px; color:var(--text); }
.sp-shapes{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.sp-shape{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:11px 4px; border:1.5px solid var(--line-2); border-radius:11px; cursor:pointer; background:var(--panel-2); }
.sp-shape.on{ border-color:var(--accent); }
.sp-shape .chip{ width:26px; height:26px; background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.sp-shape em{ font-style:normal; font-size:9.5px; color:var(--text-2); }
.sp-rotrow{ display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; font-size:11px; color:var(--text-3); }
.sp-rotrow .r{ display:flex; align-items:center; gap:10px; }
.sp-rotrow .sp-deg{ font-family:ui-monospace,monospace; font-size:11.5px; color:var(--accent); }
.sp-rotrow button{ background:transparent; border:0; color:var(--text-3); cursor:pointer; font-size:11px; }
.sp-rot,.sp-size,.sp-m{ width:100%; accent-color:var(--accent); }
.sp-filters{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sp-filter{ padding:0; border:2px solid var(--line-2); border-radius:11px; overflow:hidden; cursor:pointer; background:transparent; }
.sp-filter.on{ border-color:var(--accent); }
.sp-filter .chip{ aspect-ratio:1/1; width:100%; display:block; }
.sp-filter em{ display:block; padding:6px 4px; font-style:normal; font-size:11px; font-weight:600; color:var(--text-2); text-align:center; }
.sp-musicedit{ margin-top:16px; border-top:1px solid var(--line); padding-top:16px; }
.sp-rrow{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-3); margin-bottom:6px; }
.sp-rrow .sp-v{ font-family:ui-monospace,monospace; color:var(--accent); font-weight:400; }
.sp-m{ margin-bottom:14px; }
.sp-textlist{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.sp-textrow{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px; border:1px solid var(--line); background:var(--panel-2); }
.sp-textrow.on{ border-color:var(--accent); }
.sp-tinput{ flex:1; min-width:0; background:transparent; border:0; color:var(--text); font-family:inherit; font-size:13px; outline:none; }
.sp-textrow button,.sp-linkitem .row button{ background:transparent; border:0; color:#ff7d8f; cursor:pointer; font-size:13px; flex:none; }
.sp-colors{ display:flex; gap:9px; }
.sp-color{ width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0; border:2px solid var(--line-2); }
.sp-color.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.sp-fonts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sp-font{ border:1.5px solid var(--line-2); cursor:pointer; font-size:14px; padding:9px; border-radius:9px; background:var(--panel-2); color:var(--text); }
.sp-font.on{ border-color:var(--accent); }
.sp-curlink{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; background:color-mix(in srgb,var(--accent) 9%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); margin:8px 0 18px; }
.sp-curlink .cov{ width:30px; height:40px; border-radius:6px; flex:none; }
.sp-curlink strong{ display:block; font-weight:600; font-size:13px; color:var(--text); }
.sp-curlink span{ font-size:11px; color:var(--text-3); }
.sp-linklist{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.sp-linkitem{ border:1px solid var(--line-2); border-radius:11px; background:var(--panel-2); padding:10px; }
.sp-linkitem .row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sp-linkitem input{ background:var(--bg-1); border:1px solid var(--line-2); border-radius:8px; padding:8px 9px; color:var(--text); font-family:inherit; font-size:12.5px; outline:none; }
.sp-linkitem .sp-llabel{ flex:1; min-width:0; }
.sp-linkitem .sp-lurl{ width:100%; color:var(--text-2); font-family:ui-monospace,monospace; font-size:11.5px; }
.sp-caption{ margin-bottom:14px; }
.sp-hashtags{ margin-bottom:20px; }
.sp-publish{ width:100%; padding:13px; }
@media(max-width:900px){
  .studio-rail{ width:96px; }
  .studio-panel{ width:300px; }
}
@media(max-width:680px){
  .studio-body{ flex-direction:column; }
  .studio-rail{ width:100%; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .studio-tool{ flex:0 0 auto; }
  .studio-panel{ width:100%; border-left:0; border-top:1px solid var(--line); }
  .studio-canvas{ padding:16px; min-height:38vh; }
}

/* ============================================================================
   Slice 3 — engagement (follow pill, like/follow states) + export/share sheet
   ============================================================================ */
.burst-follow{ flex:none; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; cursor:pointer; font-weight:600; font-size:10.5px; padding:5px 11px; border-radius:8px; }
.burst-follow.on{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.82); }
.bp-act .n{ font-size:11px; margin-top:2px; }
.bp-like.on{ color:#ff5c8a; border-color:rgba(255,92,138,.5); }
.bp-like.on svg{ fill:#ff5c8a; }
.bp-follow.on{ color:#34e0c4; border-color:rgba(52,224,196,.5); font-weight:800; }
.bp-act[data-pfollow]{ font-size:18px; font-weight:800; }

/* export & share sheet (reuses .bursty-modal / .bursty-sheet shell) */
.xp-sheet{ width:520px; }
.xp-body{ padding:18px 22px 22px; }
.xp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.xp-btn{ padding:13px 14px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); cursor:pointer; font-family:inherit; font-weight:600; font-size:13px; text-align:left; transition:border-color .15s,background .15s; }
.xp-btn:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--panel-2)); }
.xp-note{ font-size:11.5px; color:var(--text-3); line-height:1.5; }