/* Jitch — Jiffy's Twitch (prefix jt-) */
.ap-jt{--jp:#9146ff;--jp2:#772ce8;--jbg:#0e0e10;--jbg2:#18181b;--jbg3:#1f1f23;--jln:#2f2f35;--jtx:#efeff1;--jmu:#adadb8;--jred:#eb0400;background:var(--jbg);color:var(--jtx);display:flex;flex-direction:column;font:14px/1.4 Inter,"Roobert",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;overflow:hidden}
.ap-jt button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ap-jt .jt-i{display:inline-flex;flex:none}.ap-jt .jt-i svg{display:block}.jt-gart{display:inline-flex;flex:none}
.jt-top{flex:none;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + var(--fake,0px) + 6px) 12px 8px 50px;background:var(--jbg2);border-bottom:1px solid #000;box-shadow:0 1px 2px rgba(0,0,0,.6);min-height:50px;z-index:3}
.ap-jt.mac .jt-top,.ap-jt.hostpage .jt-top{padding:8px 14px}
.jt-brand{display:flex;align-items:center;gap:6px;color:var(--jp)}.jt-brand b{font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--jtx)}
.jt-tabs{display:flex;gap:2px;margin-left:4px}.jt-tabs button{padding:6px 10px;border-radius:6px;font-weight:600;color:var(--jmu)}.jt-tabs button.on{color:var(--jtx);background:var(--jbg3);box-shadow:inset 0 -2px 0 var(--jp)}
.jt-topr{margin-left:auto;display:flex;align-items:center;gap:8px}
.jt-bal{display:flex;align-items:center;gap:5px;background:var(--jbg3);padding:5px 10px;border-radius:6px;font-weight:700;font-size:13px}.jt-bal .jt-i{color:#bf94ff}
.jt-me{width:30px;height:30px;border-radius:50%;background:var(--jp);display:grid;place-items:center;overflow:hidden}.jt-me img{width:100%;height:100%;object-fit:cover}
.jt-body{flex:1;min-height:0;display:flex;flex-direction:column}
.jt-main{flex:none;display:flex;flex-direction:column}
.jt-player{position:relative;background:#000;aspect-ratio:16/9;width:100%;overflow:hidden}
.jt-stage{position:absolute;inset:0;display:grid;gap:2px}.jt-stage.n2{grid-template-columns:1fr 1fr}.jt-stage.n3,.jt-stage.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.jt-stage.n3 .jt-tile:first-child{grid-row:span 2}
.jt-tile{position:relative;background:#000;min-width:0;min-height:0;overflow:hidden}.jt-tile video{width:100%;height:100%;object-fit:contain;display:block;background:#000}.jt-stage.n2 .jt-tile video,.jt-stage.n3 .jt-tile video,.jt-stage.n4 .jt-tile video{object-fit:cover}.jt-tile.scr video{object-fit:contain!important}
.jt-nm{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);padding:2px 7px;border-radius:4px;font-size:12px;font-weight:600}
.jt-audonly{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,#2a1650,#0e0e10 70%)}.jt-audonly b{font-size:15px}
.jt-bars{display:flex;gap:5px;align-items:flex-end;height:44px}.jt-bars i{width:7px;background:var(--jp);border-radius:3px;animation:jtbar 1s ease-in-out infinite}.jt-bars i:nth-child(2){animation-delay:.15s}.jt-bars i:nth-child(3){animation-delay:.3s}.jt-bars i:nth-child(4){animation-delay:.45s}.jt-bars i:nth-child(5){animation-delay:.6s}
@keyframes jtbar{0%,100%{height:10px}50%{height:44px}}
.jt-ovl{position:absolute;inset:0;pointer-events:none}.jt-ovl>*{pointer-events:auto}
.jt-live{position:absolute;top:10px;left:10px;background:var(--jred);color:#fff;font-weight:700;font-size:12px;padding:1px 6px;border-radius:4px;pointer-events:none!important}
.jt-unmute{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.72)!important;padding:10px 16px;border-radius:8px;font-weight:700}
.jt-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:20px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:.95}.jt-ctl .sp{flex:1}.jt-ctl button{padding:4px;display:flex}
.jt-off{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 30% 20%,rgba(145,70,255,.35),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(119,44,232,.3),transparent 55%),#0e0e10}
.jt-offcard{text-align:center;padding:16px 22px;max-width:420px}.jt-offcard h2{margin:8px 0 6px;font-size:20px;font-weight:700}.jt-offcard p{margin:0 0 12px;color:var(--jmu)}
.jt-offtag{display:inline-block;background:var(--jbg3);border:1px solid var(--jln);color:var(--jtx);font-weight:700;font-size:11px;letter-spacing:.6px;padding:2px 8px;border-radius:4px}.jt-offtag.live{background:var(--jred);border-color:var(--jred);color:#fff}
.jt-warn{color:#ffb84d!important;font-size:13px}
.jt-info{padding:10px 12px;border-bottom:1px solid var(--jln)}
.jt-chan{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.jt-av{position:relative;width:52px;height:52px;flex:none;border-radius:50%;padding:2px}.jt-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#222}.jt-av.live{background:var(--jred)}.jt-av.live img{border:2px solid var(--jbg)}
.jt-av i{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);background:var(--jred);color:#fff;font:700 10px/1 Inter,sans-serif;font-style:normal;padding:2px 4px;border-radius:3px;border:2px solid var(--jbg)}
.jt-chtx{flex:1;min-width:150px}.jt-name{display:flex;align-items:center;gap:4px;font-weight:700;font-size:16px}.jt-name .jt-i{color:var(--jp)}
.jt-title{font-weight:600;margin-top:1px;word-break:break-word}.jt-cat{color:#bf94ff;font-size:13px;margin-top:2px;font-weight:600}
.jt-tag{display:inline-flex;align-items:center;gap:4px;background:var(--jbg3);border-radius:10px;padding:2px 8px;font-size:12px;margin-top:4px;color:var(--jmu)}
.jt-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jt-uptime{font-variant-numeric:tabular-nums;color:var(--jmu);font-size:13px}
.jt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border-radius:6px;font-weight:700!important;font-size:13.5px;background:var(--jbg3)!important;white-space:nowrap}
.jt-btn.pri{background:var(--jp)!important;color:#fff!important}.jt-btn.pri:hover{background:var(--jp2)!important}
.jt-btn.gift{background:var(--jbg3)!important}.jt-btn.gift .jt-i{color:#bf94ff}
.jt-btn.ghost{background:rgba(83,83,95,.38)!important}.jt-btn.red{background:var(--jred)!important;color:#fff!important}
.jt-btn.sm{padding:5px 9px;font-size:12.5px}.jt-btn.wide{width:100%;margin-top:10px}.jt-btn.big{padding:12px;font-size:16px}.jt-btn:disabled{opacity:.5}
.jt-chat{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--jbg2)}
.jt-chathd{flex:none;text-align:center;font-weight:600;font-size:12px;letter-spacing:.5px;padding:9px;border-bottom:1px solid var(--jln);color:var(--jmu)}
.jt-chatlist{flex:1;min-height:0;overflow-y:auto;padding:8px 10px;-webkit-overflow-scrolling:touch}
.jt-msg{padding:3px 6px;border-radius:4px;word-wrap:break-word;line-height:1.5}.jt-msg b{font-weight:700}.jt-msg[data-from]:hover{background:rgba(255,255,255,.05)}
.jt-msg.gift{background:linear-gradient(90deg,rgba(145,70,255,.28),rgba(145,70,255,.06));border-left:3px solid var(--jp);margin:4px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.jt-msg.gift em{color:var(--jmu)}
.jt-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;margin-right:3px;vertical-align:-4px}.jt-badge.host{background:var(--jred);color:#fff}.jt-badge.stage{background:#00b5ad;color:#fff}
.jt-sys{color:var(--jmu);font-size:13px;padding:4px 6px}.jt-deleted{color:var(--jmu)}
.jt-chatfoot{flex:none;padding:8px 10px calc(var(--bot,0px) + 10px);border-top:1px solid var(--jln)}
.jt-chatoff{color:var(--jmu);text-align:center;font-size:13px;padding:6px}
.jt-inrow{display:flex;gap:6px;align-items:center}
.jt-chatin,.jt-in{flex:1;min-width:0;background:var(--jbg3);border:2px solid transparent;border-radius:6px;color:var(--jtx);padding:8px 10px;font:16px/1.3 inherit;outline:none}
.jt-chatin:focus,.jt-in:focus{border-color:var(--jp);background:#000}
.jt-ib{display:grid!important;place-items:center;width:36px;height:36px;border-radius:6px;background:var(--jbg3)!important}.jt-ib .jt-i{color:#bf94ff}.jt-ib.on{background:var(--jp)!important}.jt-ib.on .jt-i{color:#fff}
.jt-footrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.jt-footrow .jt-fine{flex:1}
.jt-stagectl{display:flex;align-items:center;gap:6px}.jt-onair{font-size:12px;font-weight:700;color:#00d5c8}
.jt-fine{color:var(--jmu);font-size:12.5px;line-height:1.4}
/* gift alerts */
.jt-alerts{position:absolute;left:0;right:0;top:12%;display:flex;justify-content:center;pointer-events:none}
.jt-alert{display:flex;align-items:center;gap:12px;background:rgba(14,14,16,.88);border:2px solid var(--jp);box-shadow:0 0 30px rgba(145,70,255,.6);border-radius:12px;padding:10px 16px;max-width:86%;animation:jtin .45s cubic-bezier(.2,1.4,.4,1)}
.jt-alert b{color:#bf94ff;font-size:16px}.jt-alert span{font-weight:700;font-size:16px}.jt-alert p{margin:3px 0 0;font-size:13px;color:var(--jtx)}
.jt-alert .jt-gart{animation:jtbob 1.2s ease-in-out infinite}.jt-alert.g-moon,.jt-alert.g-galaxy{border-color:#ffd34d;box-shadow:0 0 50px rgba(255,211,77,.55)}
.jt-alert.out{animation:jtout .5s forwards}
@keyframes jtin{from{transform:translateY(-30px) scale(.7);opacity:0}}@keyframes jtout{to{transform:translateY(-20px);opacity:0}}@keyframes jtbob{50%{transform:translateY(-5px) rotate(-6deg)}}
/* sheets */
.jt-sheetbg{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.jt-sheet{background:var(--jbg2);width:100%;max-width:460px;border-radius:14px 14px 0 0;padding:8px 16px calc(var(--bot,0px) + 18px);max-height:86%;overflow:auto;border:1px solid var(--jln);border-bottom:0;animation:jtup .25s ease-out}
.ap-jt.mac .jt-sheetbg,.ap-jt.hostpage .jt-sheetbg{align-items:center}.ap-jt.mac .jt-sheet,.ap-jt.hostpage .jt-sheet{border-radius:12px;border-bottom:1px solid var(--jln)}
@keyframes jtup{from{transform:translateY(40px);opacity:0}}
.jt-grab{width:36px;height:4px;border-radius:2px;background:#444;margin:0 auto 10px}
.jt-sheet h3{margin:4px 0 8px;font-size:17px}.jt-sheet .jt-in{width:100%;margin:8px 0;box-sizing:border-box}
.jt-shhd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.jt-shhd h3{flex:1}
.jt-walbal{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--jmu)}.jt-walbal b{color:var(--jtx)}.jt-walbal .jt-i{color:#bf94ff}
.jt-link{color:#bf94ff!important;font-weight:600!important;padding:4px 0!important}
.jt-gifts{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:8px 0}
.jt-gift{display:flex!important;flex-direction:column;align-items:center;gap:3px;padding:10px 4px!important;border-radius:8px;background:var(--jbg3)!important;border:2px solid transparent!important}
.jt-gift.on{border-color:var(--jp)!important;background:rgba(145,70,255,.18)!important}.jt-gift.dim{opacity:.55}
.jt-gift b{font-size:12.5px}.jt-gift span{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--jmu)}
.jt-pack{display:flex!important;width:100%;justify-content:space-between;align-items:center;padding:12px!important;border-radius:8px;background:var(--jbg3)!important;margin:6px 0}
.jt-pack span{display:flex;align-items:center;gap:6px}.jt-pack .jt-i{color:#bf94ff}.jt-pack em{font-style:normal;font-weight:700;background:var(--jp);color:#fff;padding:4px 10px;border-radius:6px}
.jt-row{display:flex!important;align-items:center;gap:10px;width:100%;padding:10px 6px!important;border-radius:6px;text-align:left;border-bottom:1px solid var(--jln)}.jt-row.on{color:#bf94ff}.jt-row.red{color:#ff6b6b}.jt-row em{font-style:normal;color:var(--jmu)}.jt-row small{color:var(--jmu)}
/* creator studio */
.jt-studio{display:none;flex:1;min-height:0;overflow-y:auto;background:var(--jbg);-webkit-overflow-scrolling:touch}
.ap-jt.studio-on .jt-body{display:none}.ap-jt.studio-on .jt-studio{display:block}
.jt-scol{max-width:640px;margin:0 auto;padding:14px 14px calc(var(--bot,0px) + 40px)}
.jt-scol h2{margin:4px 0 10px;font-size:22px}.jt-scol h4{margin:0 0 6px;font-size:14px}
.jt-stats{display:flex;gap:8px;margin-bottom:12px}.jt-stats>div{flex:1;background:var(--jbg2);border:1px solid var(--jln);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column}.jt-stats b{font-size:18px}.jt-stats span{color:var(--jmu);font-size:12px}
.jt-card{background:var(--jbg2);border:1px solid var(--jln);border-radius:10px;padding:12px;margin-bottom:12px}.jt-card.warn{border-color:#ffb84d}.jt-card p{margin:4px 0;color:var(--jmu);font-size:13px}
.jt-card label{display:block;font-size:12px;font-weight:700;color:var(--jmu);margin:8px 0 4px}.jt-card .jt-in{width:100%;box-sizing:border-box}
.jt-card label.jt-check{display:flex;gap:8px;align-items:flex-start;font-weight:500;color:var(--jtx);font-size:13px}.jt-check input{accent-color:var(--jp);margin-top:2px}
.jt-card select.jt-in{appearance:auto}
.jt-seg{display:flex;background:var(--jbg3);border-radius:8px;padding:3px;margin-bottom:10px}.jt-seg button{flex:1;padding:7px 4px;border-radius:6px;font-weight:600;color:var(--jmu);font-size:13px}.jt-seg button.on{background:var(--jp);color:#fff}
.jt-prev{aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;display:grid;place-items:center}.jt-prev video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.jt-golive{margin:0 0 12px}
.jt-steps{margin:0 0 10px;padding-left:20px;color:var(--jtx);font-size:13px}.jt-steps li{margin:4px 0}
.jt-copy{margin:8px 0}.jt-copy>div{display:flex;align-items:center;gap:8px;background:#000;border:1px solid var(--jln);border-radius:6px;padding:6px 6px 6px 10px}.jt-copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.jt-confirm{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}.jt-confirm span{flex:1}
.jt-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:8px}.jt-vid{display:flex!important;flex-direction:column;gap:4px;text-align:left;font-size:12.5px}.jt-vid img,.jt-vid .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--jbg3);display:grid;place-items:center}
/* wide: chat on the right like Twitch */
.ap-jt.mac .jt-body,.ap-jt.hostpage .jt-body{flex-direction:row}
.ap-jt.mac .jt-main,.ap-jt.hostpage .jt-main{flex:1;min-width:0;overflow-y:auto}
.ap-jt.mac .jt-chat,.ap-jt.hostpage .jt-chat{flex:none;width:340px;border-left:1px solid var(--jln)}
.ap-jt.mac .jt-chatfoot,.ap-jt.hostpage .jt-chatfoot{padding-bottom:10px}
@media (max-width:760px){.ap-jt.hostpage .jt-body{flex-direction:column}.ap-jt.hostpage .jt-main{flex:none;overflow:visible}.ap-jt.hostpage .jt-chat{width:auto;flex:1;border-left:0}}
.jt-pack.on{box-shadow:inset 0 0 0 2px #bf94ff}
