/* Ujjain Market — ▶️ YouTuber tools. Extends /studio/studio.css (per-tool colours + tool-specific bits). */
body[data-mk="yt"]     { --c1: #e60023; --c2: #ff5a5f; --c3: #8a0016; }
body[data-mk="thumb"]  { --c1: #e60023; --c2: #ff6b3d; --c3: #8a0016; }
body[data-mk="tele"]   { --c1: #1d4ed8; --c2: #38bdf8; --c3: #0b2a7a; }
body[data-mk="intro"]  { --c1: #ea580c; --c2: #fbbf24; --c3: #8a3000; }
.tile[data-mk="thumb"] { --c1: #e60023; --c2: #ff7a45; --c3: #7a0014; }
.tile[data-mk="shorts"]{ --c1: #9333ea; --c2: #f472b6; --c3: #4c0d7a; }
.tile[data-mk="tele"]  { --c1: #1d4ed8; --c2: #38bdf8; --c3: #0b2a7a; }
.tile[data-mk="subs"]  { --c1: #059669; --c2: #a3e635; --c3: #04533a; }
.tile[data-mk="intro"] { --c1: #ea580c; --c2: #fbbf24; --c3: #7a2c00; }

/* small glossy emoji buttons (stickers etc.) */
.ebtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.ebtn { font: inherit; font-size: 1.45rem; line-height: 1; min-height: 46px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font-weight: 800;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.55), transparent 55%), linear-gradient(var(--eb1, #fff6e8), var(--eb2, #ffd9a8));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.12), 0 3px 0 var(--eb3, #d9a35f); transition: transform .1s; }
.ebtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--eb3, #d9a35f); }
.ebtn--txt { font-size: .85rem; padding: 4px 6px; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.colors input[type=color] { width: 44px; height: 36px; padding: 2px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #efd3b3; cursor: pointer; }
.colors label { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; }
.chk { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 8px; }
.chk input { width: 20px; height: 20px; accent-color: var(--c1); }
.pv canvas.drag { touch-action: none; cursor: grab; background: #000; }
.selbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.selbar .fld { flex: 1 1 140px; margin: 0; }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.tabs button { font: inherit; font-weight: 800; font-size: .95rem; border: 0; border-radius: 16px; padding: 10px 4px; cursor: pointer; color: #fff; line-height: 1.15;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.4), transparent 55%), linear-gradient(var(--tb1), var(--tb2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 var(--tb3); text-shadow: 0 1px 1px rgba(0,0,0,.35); opacity: .7; }
.tabs button b { display: block; font-size: 1.5rem; }
.tabs button[aria-selected="true"] { opacity: 1; outline: 3px solid #ffd34d; outline-offset: 1px; }
.pv video.out { background: #000; }

/* teleprompter stage */
.tp-stage { position: fixed; inset: 0; z-index: 900; background: #000; color: #fff; overflow: hidden; }
.tp-stage video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scaleX(-1); opacity: .55; }
.tp-view { position: absolute; inset: 0; overflow: hidden; }
.tp-view.mirror { transform: scaleX(-1); }
.tp-text { position: absolute; left: 0; right: 0; top: 0; padding: 40vh 6vw 70vh; font-weight: 800; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
  text-shadow: 0 2px 6px rgba(0,0,0,.9); will-change: transform; font-family: "Baloo 2", "Hind", system-ui, sans-serif; }
.tp-text span.done { opacity: .45; }
.tp-text span.cur { color: #ffd34d; }
.tp-line { position: absolute; left: 0; right: 0; top: 30vh; height: 0; border-top: 2px dashed rgba(255,211,77,.7); pointer-events: none; }
.tp-line::before { content: "▶"; position: absolute; left: 4px; top: -14px; color: #ffd34d; font-size: 18px; }
.tp-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30vmin; font-weight: 800; color: #ffd34d;
  text-shadow: 0 6px 20px rgba(0,0,0,.8); pointer-events: none; }
.tp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.75) 35%); }
.tp-bar .ebtn { width: 52px; flex: 0 0 auto; }
.tp-rec { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px; background: #e60023; font-weight: 800; font-size: .85rem; }
.tp-info { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); font-weight: 700; font-size: .8rem; max-width: 60vw; }