body{
    background:#111;
    color:#fff;
}

.chroma-panel{
    border-top:1px solid #2e2e38;
    margin-top:8px;
    padding-top:10px;
}

.chroma-panel .effect-group{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
}

.chroma-panel label{
    min-width:110px;
    font-size:13px;
    color:#ddd;
}

.chroma-panel input[type="range"]{
    width:160px;
}

.chroma-panel span{
    color:#00ff99;
    font-weight:600;
    min-width:35px;
}

/* =====================================
   CROP MODE
   ===================================== */

.crop-controls{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:999;
    background:rgba(0,0,0,.65);
    padding:10px 14px;
    border-radius:12px;
    backdrop-filter:blur(6px);
}

.pro-preview-area{
    position:relative;
    overflow:hidden;
}

.crop-mode video{
    display:none !important;
}

.crop-mode #cropImage{
    display:block !important;
}

/* =============================================
   BREAKING NEWS – top-news bar layout
   ============================================= */

/* The container must be flex and clip overflow */
.top-news {
    display         : flex;
    align-items     : center;
    overflow        : hidden;
    position        : relative;
}

/* Remove default sequence-marquee overflow so
   our slide animations are visible */
.top-news .sequence-marquee {
    overflow : visible;
    width    : 100%;
}

#topNewsText {
    display     : flex;
    align-items : center;
    gap         : 0;
    overflow    : hidden;
    white-space : nowrap;
    width       : 100%;
    height:50px;
}

/* =============================================
   BADGE  – the red "BREAKING" pill
   ============================================= */
.bn-badge {
    flex-shrink      : 0;
    background       : #e30000;
    color            : #fff;
    font-family      : 'Poppins', sans-serif;
    font-size        : 11px;
    font-weight      : 800;
    letter-spacing   : 2px;
    text-transform   : uppercase;
    padding          : 3px 10px;
    border-radius    : 3px;
    margin-right     : 0;
    transform        : translateX(-120px);
    opacity          : 0;
    transition       : none;

    /* pulse glow */
    box-shadow       : 0 0 0 0 rgba(227,0,0,.7);
}

/* Badge enters from the left */
.bn-badge-in {
    animation : bnBadgeSlideIn 0.4s cubic-bezier(.22,.9,.36,1) forwards,
                bnPulse 1.2s 0.5s ease-in-out infinite;
}

/* Badge exits to the left */
.bn-badge-out {
    animation : bnBadgeSlideOut 0.4s ease-in forwards !important;
}

@keyframes bnBadgeSlideIn {
    from { transform: translateX(-120px); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
}
@keyframes bnBadgeSlideOut {
    from { transform: translateX(0);      opacity: 1; }
    to   { transform: translateX(-120px); opacity: 0; }
}
@keyframes bnPulse {
    0%,100% { box-shadow: 0 0 0 0   rgba(227,0,0,.6); }
    50%      { box-shadow: 0 0 0 6px rgba(227,0,0,0);  }
}

/* =============================================
   DIVIDER  – thin vertical red line between badge and text
   ============================================= */
.bn-divider {
    flex-shrink : 0;
    width       : 3px;
    height      : 70%;
    min-height  : 18px;
    background  : #e30000;
    margin      : 0 10px;
    border-radius: 2px;
    opacity     : 0;
    transition  : opacity 0.3s 0.5s;
}

/* Show divider once badge is in */
.bn-badge-in ~ .bn-divider {
    opacity : 1;
}

/* =============================================
   HEADLINE  – the main text
   ============================================= */
.bn-headline {
    flex          : 1;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
    transform     : translateX(60px);
    opacity       : 0;
    transition    : none;
}

/* Headline enters from the right */
.bn-headline-in {
    animation : bnHeadlineSlideIn 0.5s cubic-bezier(.22,.9,.36,1) forwards;
}

/* Headline exits to the left */
.bn-headline-out {
    animation : bnHeadlineSlideOut 0.4s ease-in forwards !important;
}

@keyframes bnHeadlineSlideIn {
    from { transform: translateX(60px);  opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes bnHeadlineSlideOut {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-40px); opacity: 0; }
}
/* EDITOR */

/* =========================
   EXPORT LOADER
========================= */

#loaderOverlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.9);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;
}

/* BOX */

.loaderBox{

    text-align:center;
}

/* SPINNER */

.spinner{

    width:70px;

    height:70px;

    border:6px solid #444;

    border-top:6px solid #00d4ff;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;
}

/* TEXT */

.loaderText{

    margin-top:20px;

    font-size:24px;

    font-weight:bold;
}

/* SUB */

.loaderSub{

    margin-top:10px;

    color:#aaa;
}

/* ANIMATION */

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

#editor{
    position:relative;
    width:640px;
}

#bgVideo{
    width:100%;
}

#overlay{
    position:absolute;
    inset:0;
}

/* VIDEO BOXES */

.video-slot,
.video-slot2{
    position:absolute;
    overflow:hidden;
    background:#000;
}

.video-slot{
    top:54px;
    left:5px;
    width:275px;
    height:245px;
}

.video-slot2{
    top:54px;
    left:282px;
    width:352px;
    height:120px;
}

.video-slot video,
.video-slot2 video{
    position:absolute;
    max-width:none !important;
}

/* EDIT ICON */

.editIcon{
    position:absolute;
    top:5px;
    right:5px;
    background:#000;
    padding:5px;
    border-radius:50%;
    z-index:10;
}

/* TOP NEWS */

.top-news{
    position:absolute;
    top:15px;
    left:25px;
    width:85%;
    overflow:hidden;
    font-size:20px;
    height:32px;
}

#topNewsText{
    white-space:nowrap;
    /*animation:scroll 20s linear infinite;*/
}

/* TICKER */

.ticker{
    position:absolute;
    bottom: 5px;
    width:100%;
    overflow:hidden;
}

#tickerText{
    white-space:nowrap;
    /*animation:scroll 10s linear infinite;*/
}

/* =========================
   SEQUENCE MARQUEE
========================= */

.sequence-marquee-top
{
    position:relative;

    width:100%;

    height:50px;
    text-align:center;
}

.sequence-marquee{

    position:relative;

    width:100%;

    height:30px;

    overflow:hidden;
    text-align:center;
    padding-left: 10px;
    padding-right: 10px;
}

/* ITEM */

.marquee-item{

    position:absolute;

    top:50%;

    white-space:nowrap;

    transform:translateY(-50%);

    will-change:transform;
}

/*.marquee-left,*/
/*.marquee-right{*/

/*    animation-timing-function:linear;*/

/*    animation-fill-mode:forwards;*/
/*}*/

/* LEFT */

.marquee-left{

    animation:
    marqueeLeftSequence 6s linear forwards;
}

@keyframes marqueeLeftSequence{

    0%{
        transform:
        translate(640px, -50%);
    }

    100%{
        transform:
        translate(-150%, -50%);
    }
}

/* RIGHT */

.marquee-right{

    animation:
    marqueeRightSequence 6s linear forwards;
}

@keyframes marqueeRightSequence{

    0%{
        transform:
        translate(-640px, -50%);
    }

    100%{
        transform:
        translate(640px, -50%);
    }
}
/* TEXT */

#textPreview{
    position:absolute;
    bottom:40px;
    width:100%;
    text-align:center;
}

/* MODAL */

.modalBox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000c;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modalContent{
    background:#222;
    padding:20px;
    width:90%;
    max-width:900px;
    max-height:90vh;
    overflow:auto;
    border-radius:10px;
}

#cropImage{
    width:100%;
    max-height:70vh;
    object-fit:contain;
    display:none;
}

/* CLIPS */

.clip{
    position:relative;
    display:flex;
    border:2px solid #555;
    background:#111;
}

.thumb{
    width:40px;
    height:70px;
    object-fit:cover;
}

/* RESIZE */

.resize-left,
.resize-right{
    width:8px;
    background:red;
    cursor:ew-resize;
}

/* PANEL */

#toolPanel{
    position:fixed;
    bottom:0;
    width:100%;
    background:linear-gradient(135deg,#1f1f2e,#2c2c3e);
    border-radius:20px 20px 0 0;
    box-shadow:0 -5px 20px rgba(0,0,0,0.5);
    padding:15px;
    display:none;
}

/* INPUTS */

.input-box{
    width:100%;
    padding:10px;
    border-radius:12px;
    border:none;
    background:#2e2e42;
    color:#fff;
    margin-bottom:10px;
}

.color-box{
    width:100%;
    height:40px;
}

/* ANIMATION */

@keyframes scroll{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(-100%);
    }
}

/* LEFT */

.marqueeLeft{

    display:inline-block;

    white-space:nowrap;

    animation:
    marqueeLeft 15s linear infinite!important;
}

@keyframes marqueeLeft{

    from{
        transform:translateX(100%);
    }

    to{
        transform:translateX(-100%);
    }
}

/* RIGHT */

.marqueeRight{

    display:inline-block;

    white-space:nowrap;

    animation:
    marqueeRight 15s linear infinite!important;
}

@keyframes marqueeRight{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }
}

/* FADE */

.fade{

    animation:
    fadeAnim 2s ease-in-out infinite!important;
}

@keyframes fadeAnim{

    0%,100%{
        opacity:0;
    }

    50%{
        opacity:1;
    }
}

/* ZOOM */

.zoom{

    animation:
    zoomAnim 2s ease-in-out infinite!important;
}

@keyframes zoomAnim{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }
}

/* BOUNCE */

.bounce{

    animation:
    bounceAnim 1s infinite!important;
}

@keyframes bounceAnim{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

/* BLINK */

.blink{

    animation:
    blinkAnim 1s step-start infinite!important;
}

@keyframes blinkAnim{

    50%{
        opacity:0;
    }
}

/* TYPING */

.typing{

    overflow:hidden;

    border-right:2px solid #fff;

    white-space:nowrap;

    width:0;

    animation:
    typingAnim 5s steps(40,end) infinite!important;
}

@keyframes typingAnim{

    from{
        width:0;
    }

    to{
        width:100%;
    }
}