/* ============================================================
   TWIGG Create Hub (Nov 7 2026) — ONE full-screen Create studio
   for signed-in streamers: PHOTO (dragon filters, ported from the
   in-profile Do Photo overlay — same design language, .dp-* became
   .ch-*), VIDEO (short clip → channel VOD via the replay pipeline)
   and LIVE (title + handoff into the Creator Studio broadcast
   flow). Opened from the header ＋ Create button, the mobile
   app-nav + button, and the profile owner's Go Live / Do Photo
   actions. Loaded by index, channel, watch, go-live, bounties and
   messages; the behavior lives in create-hub.js. Client-side only —
   no new endpoints.
   ============================================================ */

/* ---- door: header ＋ Create button ---- */
.createbtn { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 18px; border:0; border-radius:999px;
  background:linear-gradient(135deg,#ffe9a8,#f3d27a 45%,#d6a949); color:#141310; font:inherit; font-weight:800; font-size:.92rem;
  box-shadow:0 6px 18px -8px rgba(214,169,73,.65); white-space:nowrap; cursor:pointer; }
.createbtn:hover { filter:brightness(1.06); }
.createbtn:active { transform:scale(.97); }

/* ---- studio shell ---- */
.ch-overlay { position:fixed; inset:0; z-index:400; background:rgba(3,3,4,.96); backdrop-filter:blur(8px);
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ch-overlay[hidden] { display:none; }
.ch-panel { width:min(560px, calc(100% - 28px)); margin:0 auto; padding:14px 0 calc(26px + env(safe-area-inset-bottom)); }
.ch-top { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px 2px 10px; }
.ch-logo { height:30px; width:auto; display:block; }
.ch-close { flex:none; width:42px; height:42px; border-radius:50%; border:1px solid rgba(240,202,114,.55);
  background:rgba(214,169,73,.08); color:var(--gold-bright, #f0ca72); font-size:1.05rem; cursor:pointer; }
.ch-earn { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 14px; padding:10px 14px; border-radius:14px;
  border:1px solid rgba(240,202,114,.55); background:linear-gradient(135deg, rgba(255,233,168,.16), rgba(214,169,73,.07));
  color:var(--ink, #f5efdd); font-size:.9rem; font-weight:600; }
.ch-earn b { color:var(--gold-bright, #f0ca72); }
.ch-bal { margin-left:auto; font-weight:800; color:var(--gold-bright, #f0ca72); white-space:nowrap; }
.ch-bal .twigg-coin { width:18px; height:18px; vertical-align:-4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ch-bal[hidden] { display:none; }

/* ---- stage (shared by PHOTO + VIDEO) ---- */
.ch-stage { position:relative; aspect-ratio:4/5; background:#000; border:1px solid rgba(240,202,114,.55); border-radius:18px;
  overflow:hidden; box-shadow:0 0 0 1px rgba(240,202,114,.25), 0 24px 50px -20px rgba(0,0,0,.9); }
.ch-stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.ch-stage video.ch-cam { position:absolute; width:2px; height:2px; opacity:0; pointer-events:none; }
.ch-stage video.ch-feed { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ch-stage video.ch-feed.mirror { transform:scaleX(-1); }
.ch-stage video.ch-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.ch-flash { position:absolute; inset:0; background:#fff8e1; opacity:0; pointer-events:none; }
.ch-flash.go { animation:chflash .45s ease-out; }
@keyframes chflash { 0% { opacity:0; } 18% { opacity:.85; } 100% { opacity:0; } }
.ch-msg { position:absolute; inset:0; display:grid; place-items:center; padding:26px; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, rgba(240,202,114,.10), rgba(0,0,0,.88)); }
.ch-msg-inner { max-width:330px; }
.ch-msg-big { font-size:2.3rem; margin-bottom:6px; }
.ch-msg h3 { margin:0 0 8px; font-size:1.25rem; }
.ch-msg p { color:var(--muted, #a79f8d); margin:0 0 18px; font-size:.95rem; }
.ch-recdot { position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:999px; background:rgba(0,0,0,.62); color:#fff; font-weight:800; font-size:.88rem; letter-spacing:.04em; }
.ch-recdot[hidden] { display:none; }
.ch-recdot i { width:11px; height:11px; border-radius:50%; background:#e5484d; animation:chpulse 1.1s ease-in-out infinite; }
@keyframes chpulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.ch-trackstat { margin:11px 2px 0; text-align:center; color:var(--muted, #a79f8d); font-size:.79rem; min-height:1.15em; }
.ch-trackstat b { color:var(--gold-bright, #f0ca72); }

/* ---- photo filter chips ---- */
.ch-chips { display:flex; gap:9px; overflow-x:auto; padding:16px 2px 4px; -webkit-overflow-scrolling:touch; }
.ch-chips::-webkit-scrollbar { height:6px; }
.ch-chips::-webkit-scrollbar-thumb { background:rgba(214,169,73,.45); border-radius:99px; }
.ch-chip { flex:none; display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  border:1px solid rgba(214,169,73,.4); background:linear-gradient(180deg,#17171d,var(--card, #101014)); color:var(--ink, #f5efdd);
  font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }
.ch-chip.active { border-color:var(--gold-bright, #f0ca72); color:#141310;
  background:linear-gradient(135deg,#ffe9a8,var(--gold-bright, #f0ca72) 45%,var(--gold, #d6a949)); box-shadow:0 8px 22px -8px rgba(214,169,73,.7); }

/* ---- big gold action button ---- */
.ch-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:0 4px; }
.ch-side { width:104px; display:flex; }
.ch-side.right { justify-content:flex-end; }
.ch-flip { display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:999px; border:1px solid rgba(214,169,73,.45);
  background:rgba(214,169,73,.06); color:var(--gold-bright, #f0ca72); font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
.ch-flip[disabled] { opacity:.4; pointer-events:none; }
.ch-big { width:76px; height:76px; border-radius:50%; border:3px solid var(--gold-bright, #f0ca72);
  background:radial-gradient(circle at 35% 30%, #ffefba, var(--gold-bright, #f0ca72) 45%, var(--gold, #d6a949) 100%);
  box-shadow:0 0 0 6px rgba(240,202,114,.15), 0 14px 30px -10px rgba(214,169,73,.8); cursor:pointer; font-size:1.65rem; line-height:1;
  display:grid; place-items:center; }
.ch-big:active { transform:scale(.95); }
.ch-big[disabled] { opacity:.4; pointer-events:none; }
.ch-big.rec { background:radial-gradient(circle at 35% 30%, #ff9a9e, #e5484d 55%, #b3272e 100%); border-color:#ffb3b8; }
.ch-big.rec span { width:30px; height:30px; border-radius:8px; background:#fff; display:block; }

/* ---- upload doors (device library, Nov 8 2026) ---- */
.ch-upload { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; padding:13px 18px;
  border-radius:999px; border:2px solid var(--gold-bright, #f0ca72); background:rgba(214,169,73,.10);
  color:var(--gold-bright, #f0ca72); font:inherit; font-size:.98rem; font-weight:800; cursor:pointer; }
.ch-upload:hover { background:rgba(214,169,73,.2); }
.ch-upload:active { transform:scale(.98); }
.ch-fileinput { display:none; }

/* ---- result / post forms ---- */
.ch-result img, .ch-result video { width:100%; border-radius:18px; border:1px solid rgba(240,202,114,.55); }
.ch-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }
.ch-note { color:var(--muted, #a79f8d); font-size:.9rem; text-align:center; margin:15px auto 0; max-width:440px; }
.ch-note.ok { color:#9fe8b1; }
.ch-note.err { color:#ffc9cb; }
.ch-field { margin-top:16px; text-align:left; }
.ch-field label { display:block; font-weight:700; font-size:.92rem; margin-bottom:7px; color:var(--ink, #f5efdd); }
.ch-input, .ch-textarea { width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px; border:1px solid rgba(214,169,73,.4);
  background:#0c0c10; color:var(--ink, #f5efdd); font:inherit; font-size:.98rem; }
.ch-input:focus, .ch-textarea:focus { outline:2px solid rgba(240,202,114,.55); outline-offset:1px; }
.ch-textarea { min-height:92px; resize:vertical; }
.ch-count { display:flex; justify-content:space-between; gap:10px; margin-top:6px; color:var(--muted, #a79f8d); font-size:.8rem; }
.ch-count b { color:var(--gold-bright, #f0ca72); }
.ch-status { margin:16px auto 0; max-width:460px; text-align:center; font-size:.95rem; min-height:1.3em; color:var(--ink, #f5efdd); }
.ch-status.ok { color:#9fe8b1; font-weight:700; }
.ch-status.err { color:#ffc9cb; }
.ch-award { margin:12px auto 0; max-width:460px; text-align:center; padding:11px 16px; border-radius:14px; font-weight:800;
  border:1px solid rgba(240,202,114,.6); background:linear-gradient(135deg, rgba(255,233,168,.2), rgba(214,169,73,.08)); color:var(--gold-bright, #f0ca72); }
.ch-award[hidden] { display:none; }

/* ---- LIVE panel ---- */
.ch-live-panel { text-align:center; padding:30px 22px 8px; }
.ch-live-big { font-size:2.6rem; margin-bottom:8px; }
.ch-live-panel h3 { margin:0 0 8px; font-size:1.35rem; }
.ch-live-panel p { color:var(--muted, #a79f8d); margin:0 auto 6px; max-width:420px; font-size:.97rem; }
.ch-live-panel .ch-field { max-width:440px; margin-left:auto; margin-right:auto; }

/* ---- bottom mode tabs ---- */
.ch-tabs { display:flex; justify-content:center; gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid rgba(214,169,73,.22); }
.ch-tab { padding:10px 22px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--muted, #a79f8d);
  font:inherit; font-weight:800; font-size:.92rem; letter-spacing:.08em; cursor:pointer; }
.ch-tab.active { color:#141310; background:linear-gradient(135deg,#ffe9a8,var(--gold-bright, #f0ca72) 45%,var(--gold, #d6a949));
  box-shadow:0 8px 22px -8px rgba(214,169,73,.7); }

@media (prefers-reduced-motion: reduce) { .ch-flash.go { animation:none; } .ch-recdot i { animation:none; } }