.jc-page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:30px}.jc-page-heading h1{margin:13px 0 7px;font-size:clamp(3rem,5vw,5.2rem);line-height:.95;letter-spacing:-.065em}.jc-page-heading p{margin:0;color:var(--jc-muted)}
.jc-recorder-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px}.jc-recorder-panel{padding:22px;border:1px solid var(--jc-border);border-radius:23px;background:rgba(255,255,255,.025)}.jc-camera-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#000}.jc-camera-frame video{width:100%;height:100%;object-fit:cover}.jc-countdown{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.4);font-size:8rem;font-weight:950}.jc-recording-status,.jc-recording-timer{position:absolute;top:14px;padding:8px 11px;border-radius:10px;background:rgba(0,0,0,.58);font-weight:850}.jc-recording-status{left:14px}.jc-recording-timer{right:14px}.jc-recorder-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.jc-recorder-error{margin-top:16px;padding:14px 16px;border:1px solid rgba(255,109,121,.24);border-radius:13px;background:rgba(255,109,121,.12);color:#ffd0d4}.jc-upload-progress{margin-top:18px}.jc-upload-progress>div{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.jc-upload-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--jc-primary),var(--jc-cyan))}

.jc-recording-mode{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px;padding:16px;border:1px solid var(--jc-border);border-radius:14px;background:rgba(255,255,255,.03)}
.jc-recording-mode label{display:flex;align-items:center;gap:7px;color:var(--jc-muted)}
.jc-library-search{margin-bottom:20px}.jc-library-search input{width:100%;min-height:56px;padding:13px 16px;border:1px solid var(--jc-border);border-radius:14px;background:var(--jc-surface);color:#fff}
.jc-video-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.jc-video-item{overflow:hidden;border:1px solid var(--jc-border);border-radius:22px;background:linear-gradient(150deg,rgba(13,44,85,.8),rgba(7,24,48,.94))}
.jc-video-item video{width:100%;aspect-ratio:9/16;max-height:500px;object-fit:contain;background:#000}
.jc-video-item-body{padding:22px}.jc-video-item-body h3{margin:8px 0}.jc-video-item-body p{color:var(--jc-muted)}
.jc-video-actions{display:flex;gap:8px;flex-wrap:wrap}
.jc-billing-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.jc-billing-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.jc-billing-card{position:relative;padding:25px;border:1px solid var(--jc-border);border-radius:20px;background:linear-gradient(150deg,rgba(13,44,85,.8),rgba(7,24,48,.94))}
.jc-billing-card.popular{border-color:rgba(89,217,255,.5)}.jc-billing-card>div{font-size:2.2rem;font-weight:950}.jc-billing-card p{min-height:52px;color:var(--jc-muted)}
.jc-payment-box{margin-top:24px}
@media(max-width:1100px){.jc-video-library,.jc-billing-plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.jc-video-library,.jc-billing-plans,.jc-billing-summary{grid-template-columns:1fr}}

.jc-recording-page{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    gap:22px;
}
.jc-recording-camera,
.jc-review-save{
    grid-column:1/-1;
}
.jc-section-title h2{
    margin:8px 0 6px;
    font-size:1.8rem;
}
.jc-section-title p{
    color:var(--jc-muted);
}
.jc-recording-details,
.jc-recording-options{
    display:grid;
    gap:20px;
}
.jc-option-group{
    display:grid;
    gap:10px;
    padding:16px;
    border:1px solid var(--jc-border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}
.jc-option-group label{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--jc-muted);
}
.jc-editor-toolbar{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}
.jc-editor-toolbar button{
    min-width:42px;
    min-height:38px;
    border:1px solid var(--jc-border);
    border-radius:9px;
    background:var(--jc-surface);
    color:#fff;
    cursor:pointer;
}
.jc-editor{
    min-height:150px;
    padding:14px;
    border:1px solid var(--jc-border);
    border-radius:13px;
    background:var(--jc-surface);
    color:#fff;
    outline:none;
}
.jc-editor:empty:before{
    content:attr(data-placeholder);
    color:var(--jc-muted);
}
.jc-camera-frame.mode-whole{
    width:min(100%,520px);
    aspect-ratio:9/16;
    margin:0 auto;
}
.jc-camera-frame.mode-half{
    width:min(100%,620px);
    aspect-ratio:4/5;
    margin:0 auto;
}
.jc-camera-frame.mode-landscape{
    width:100%;
    aspect-ratio:16/9;
    margin:0 auto;
}
.jc-frame-guide{
    position:absolute;
    inset:8%;
    pointer-events:none;
    border:2px dashed rgba(89,217,255,.62);
    border-radius:45% 45% 18% 18%;
}
.jc-frame-guide span{
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    width:max-content;
    max-width:90%;
    padding:6px 9px;
    border-radius:8px;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-size:.72rem;
}
.jc-review-save{
    text-align:center;
}
.jc-library-search{
    display:flex;
    gap:10px;
}
.jc-library-search input{
    flex:1;
}
.jc-library-video-wrap{
    position:relative;
    background:#000;
}
.jc-library-logo{
    position:absolute;
    top:12px;
    right:12px;
    width:68px;
    height:68px;
    object-fit:contain;
    padding:6px;
    border-radius:12px;
    background:#fff;
}
.jc-video-card-top{
    display:flex;
    justify-content:space-between;
    gap:15px;
}
.jc-recording-layout{
    min-width:48px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(89,217,255,.10);
    color:#8ddcff;
    font-size:.74rem;
    font-weight:900;
}
.jc-recording-meta{
    display:grid;
    gap:4px;
    margin:14px 0;
}
.jc-recording-meta span{
    color:var(--jc-muted);
}
.jc-library-remarks{
    max-height:130px;
    overflow:auto;
    margin:14px 0;
    padding:13px;
    border:1px solid var(--jc-border);
    border-radius:11px;
    background:rgba(255,255,255,.025);
}
.jc-translation-tags{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:13px 0;
}
.jc-translation-tags span{
    padding:6px 9px;
    border-radius:999px;
    background:rgba(47,128,237,.14);
    color:#9fd9ff;
    font-size:.72rem;
    font-weight:850;
}
.jc-attachment-count{
    margin:12px 0;
    color:var(--jc-muted);
}
.jc-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:300;
    display:grid;
    place-items:center;
    padding:20px;
    pointer-events:none;
    opacity:0;
    background:rgba(0,7,18,.78);
    backdrop-filter:blur(6px);
    transition:.2s ease;
}
.jc-modal-backdrop.show{
    pointer-events:auto;
    opacity:1;
}
.jc-attachment-modal{
    width:min(94%,620px);
    overflow:hidden;
    border:1px solid var(--jc-border);
    border-radius:22px;
    background:var(--jc-surface);
    box-shadow:var(--jc-shadow);
}
.jc-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:20px;
    border-bottom:1px solid var(--jc-border);
}
.jc-modal-head h3{
    margin:7px 0 0;
}
.jc-modal-body{
    display:grid;
    gap:16px;
    padding:22px;
}
@media(max-width:900px){
    .jc-recording-page{
        grid-template-columns:1fr;
    }
    .jc-recording-camera,
    .jc-review-save{
        grid-column:auto;
    }
}
@media(max-width:650px){
    .jc-library-search{
        flex-direction:column;
    }
    .jc-camera-frame.mode-whole,
    .jc-camera-frame.mode-half{
        width:100%;
    }
}

.jc-step-indicator{
    display:flex;
    gap:10px;
    margin-bottom:22px;
}
.jc-step-indicator button{
    flex:1;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid var(--jc-border);
    border-radius:14px;
    background:rgba(255,255,255,.03);
    color:var(--jc-muted);
    font-weight:900;
}
.jc-step-indicator button span{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.07);
}
.jc-step-indicator button.active{
    color:#fff;
    border-color:rgba(89,217,255,.35);
    background:linear-gradient(135deg,var(--jc-primary),var(--jc-primary-dark));
}
.jc-recording-step{
    display:none;
}
.jc-recording-step.active{
    display:block;
}
.jc-recording-form-layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    gap:22px;
}
.jc-step-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:22px;
}
.jc-output-explainer{
    padding:16px;
    border:1px solid rgba(89,217,255,.22);
    border-radius:14px;
    background:rgba(89,217,255,.06);
}
.jc-output-explainer p{
    margin:5px 0 0;
    color:var(--jc-muted);
}
.jc-composer-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:22px;
}
.jc-composed-preview-wrap{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:18px;
    background:#000;
}
#compositeCanvas{
    width:100%;
    display:block;
    aspect-ratio:16/9;
    background:#000;
}
.jc-composed-preview-wrap>video{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.jc-composed-preview-wrap .jc-countdown{
    position:absolute;
    inset:0;
}
.jc-composed-preview-wrap .jc-recording-status,
.jc-composed-preview-wrap .jc-recording-timer{
    z-index:3;
}
.jc-live-details-card{
    align-self:start;
    position:sticky;
    top:105px;
}
.jc-live-logo{
    min-height:90px;
    display:grid;
    place-items:center;
    margin:18px 0;
    padding:12px;
    border-radius:14px;
    background:#fff;
    color:#60748d;
    text-align:center;
}
.jc-live-logo img{
    max-width:100%;
    max-height:90px;
    object-fit:contain;
}
.jc-live-details-card h2{
    margin:8px 0 3px;
    font-size:2rem;
}
.jc-live-details-card>p{
    color:#83cfff;
}
.jc-live-details{
    display:grid;
    gap:10px;
    margin:20px 0;
}
.jc-live-details div{
    padding:12px;
    border:1px solid var(--jc-border);
    border-radius:11px;
    background:rgba(255,255,255,.025);
}
.jc-live-details dt{
    color:var(--jc-muted);
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
}
.jc-live-details dd{
    margin:3px 0 0;
    font-weight:800;
}
.jc-live-remarks{
    max-height:180px;
    overflow:auto;
    padding:14px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    color:var(--jc-muted);
    white-space:pre-wrap;
}
@media(max-width:980px){
    .jc-recording-form-layout,
    .jc-composer-layout{
        grid-template-columns:1fr;
    }
    .jc-live-details-card{
        position:static;
    }
}
@media(max-width:650px){
    .jc-step-indicator{
        flex-direction:column;
    }
}

.jc-app-body{background:#f3f6fa;color:#10243d}
.jc-app-body .jc-app-content{color:#10243d}
.jc-compact-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.jc-compact-card{overflow:hidden;border:1px solid #e5ebf3;border-radius:17px;background:#fff;box-shadow:0 10px 35px rgba(14,39,72,.08);transition:.18s}
.jc-compact-card:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(14,39,72,.13)}
.jc-compact-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#0b315f,#06152b)}
.jc-compact-thumb video{width:100%;height:100%;object-fit:cover;opacity:.84}
.jc-compact-logo{position:absolute;top:10px;left:10px;width:46px;height:46px;padding:4px;object-fit:contain;border-radius:9px;background:#fff}
.jc-visibility-badge{position:absolute;top:10px;right:10px;padding:5px 7px;border-radius:999px;color:#fff;font-size:.62rem;font-weight:950}
.jc-visibility-public{background:#21a66a}.jc-visibility-unlisted{background:#e38c22}.jc-visibility-private{background:#65758a}
.jc-thumb-play{position:absolute;left:50%;top:50%;width:52px;height:52px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;color:#fff;font-size:1.25rem;background:rgba(0,0,0,.56)}
.jc-compact-body{padding:16px}.jc-compact-body h3{margin:0;color:#10243d;font-size:1rem;line-height:1.2}
.jc-compact-body>strong{display:block;margin-top:5px;color:#2f80ed;font-size:.72rem}.jc-compact-body>p{margin:5px 0 11px;color:#60748d;font-size:.82rem}
.jc-compact-meta{min-height:24px;display:flex;gap:8px;flex-wrap:wrap;color:#60748d;font-size:.72rem}
.jc-compact-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:13px}
.jc-compact-action{min-height:35px;display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid #e3eaf3;border-radius:9px;color:#214164;background:#f8fafc;font-size:.7rem;font-weight:850;cursor:pointer}
.jc-compact-action:hover{color:#fff;border-color:#2f80ed;background:#2f80ed}
.jc-copy-row{display:grid;grid-template-columns:1fr auto;gap:9px}.jc-whatsapp-button{width:100%;background:#25d366}
.jc-share-modal textarea{width:100%;padding:13px;border:1px solid var(--jc-border);border-radius:12px;background:#071a34;color:#fff;resize:vertical}
@media(max-width:650px){.jc-compact-library{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.jc-compact-body{padding:12px}.jc-compact-actions{grid-template-columns:1fr}.jc-copy-row{grid-template-columns:1fr}}

/* GLASS BLUE SYSTEM */
.jc-recording-details,
.jc-recording-options,
.jc-composer-preview-card{
    background:
      linear-gradient(145deg,rgba(47,128,237,.10),rgba(255,255,255,.84)) !important;
    border:1px solid rgba(47,128,237,.20) !important;
    backdrop-filter:blur(20px);
    box-shadow:0 20px 50px rgba(15,39,72,.08) !important;
    color:#10243d !important;
}
.jc-recording-details h2,
.jc-recording-options h2,
.jc-composer-preview-card h2{
    color:#10243d !important;
}
.jc-recording-details p,
.jc-recording-options p,
.jc-composer-preview-card p{
    color:#60748d !important;
}
.jc-recording-details .jc-card-label,
.jc-recording-options .jc-card-label,
.jc-composer-preview-card .jc-card-label{
    color:#2563eb !important;
}
.jc-recording-details .jc-field label,
.jc-recording-options .jc-field label{
    color:#183553 !important;
}
.jc-recording-details input,
.jc-recording-details select,
.jc-recording-details textarea,
.jc-recording-options input,
.jc-recording-options select{
    background:rgba(255,255,255,.92) !important;
    color:#10243d !important;
    border-color:rgba(47,128,237,.18) !important;
}
.jc-option-group{
    background:rgba(255,255,255,.72) !important;
    border-color:rgba(47,128,237,.16) !important;
}
.jc-option-group strong{
    color:#10243d !important;
}
.jc-option-group label{
    color:#47627f !important;
}
.jc-editor{
    background:rgba(255,255,255,.92) !important;
    color:#10243d !important;
    border-color:rgba(47,128,237,.18) !important;
}

/* VIDEO LIBRARY: WHITE CARDS + GLASS BLUE HOVER */
.jc-compact-card{
    background:#ffffff !important;
    border:1px solid #e5ebf3 !important;
    box-shadow:0 10px 35px rgba(14,39,72,.08) !important;
}
.jc-compact-card:hover{
    background:
      linear-gradient(145deg,rgba(47,128,237,.06),rgba(255,255,255,.96)) !important;
    border-color:rgba(47,128,237,.20) !important;
}
.jc-icon-actions{
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:7px !important;
    margin-top:13px !important;
}
.jc-icon-action{
    width:100%;
    min-height:38px;
    display:grid;
    place-items:center;
    border:1px solid #e3eaf3;
    border-radius:10px;
    color:#2f80ed;
    background:#ffffff;
    font-size:1rem;
    cursor:pointer;
}
.jc-icon-action:hover{
    color:#ffffff;
    border-color:#2f80ed;
    background:#2f80ed;
}
@media(max-width:650px){
    .jc-icon-actions{
        grid-template-columns:repeat(5,1fr) !important;
    }
}


/* ===== CLEAR GLASS BLUE PANELS ===== */
.jc-app-content .jc-card,
.jc-recording-details,
.jc-recording-options,
.jc-composer-preview-card,
.jc-review-save,
.jc-payment-box,
.jc-billing-card,
.jc-stat-card{
    background:
      linear-gradient(
        145deg,
        rgba(47,128,237,.16) 0%,
        rgba(255,255,255,.78) 58%,
        rgba(255,255,255,.90) 100%
      ) !important;
    border:1px solid rgba(47,128,237,.30) !important;
    backdrop-filter:blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
    box-shadow:
      0 20px 55px rgba(31,94,190,.14),
      inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.jc-app-content .jc-card:hover,
.jc-billing-card:hover,
.jc-stat-card:hover{
    border-color:rgba(47,128,237,.48) !important;
    box-shadow:
      0 26px 65px rgba(31,94,190,.20),
      inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.jc-recording-details .jc-section-title,
.jc-recording-options .jc-section-title,
.jc-composer-preview-card .jc-section-title{
    padding:14px 16px;
    margin:-4px -4px 18px;
    border:1px solid rgba(47,128,237,.22);
    border-radius:15px;
    background:rgba(255,255,255,.56);
    backdrop-filter:blur(14px);
}
.jc-option-group,
.jc-output-explainer{
    background:rgba(255,255,255,.64) !important;
    border-color:rgba(47,128,237,.24) !important;
}
.jc-recording-details input,
.jc-recording-details select,
.jc-recording-details textarea,
.jc-recording-options input,
.jc-recording-options select,
.jc-editor{
    background:rgba(255,255,255,.94) !important;
    border-color:rgba(47,128,237,.24) !important;
    color:#10243d !important;
}
.jc-recording-details input:focus,
.jc-recording-options select:focus,
.jc-editor:focus{
    border-color:#2f80ed !important;
    box-shadow:0 0 0 4px rgba(47,128,237,.12) !important;
}

/* Video library stays white, with visible glass-blue hover */
.jc-compact-card{
    background:#ffffff !important;
    border:1px solid #dfe8f5 !important;
}
.jc-compact-card:hover{
    background:
      linear-gradient(145deg,rgba(47,128,237,.12),rgba(255,255,255,.96)) !important;
    border-color:rgba(47,128,237,.38) !important;
    box-shadow:0 22px 55px rgba(31,94,190,.17) !important;
}


/* TEMPLATE SELECTOR */
.jc-template-selector{
    display:grid;
    gap:9px;
}
.jc-template-option{
    display:grid !important;
    grid-template-columns:auto 1fr;
    gap:10px;
    align-items:start !important;
    padding:10px 12px;
    border:1px solid rgba(47,128,237,.16);
    border-radius:11px;
    background:rgba(255,255,255,.66);
}
.jc-template-option span,
.jc-template-option b,
.jc-template-option small{
    display:block;
}
.jc-template-option b{color:#153756}
.jc-template-option small{margin-top:2px;color:#64748b;font-size:.72rem}
.jc-field-check-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}
.jc-field-check-grid label{
    padding:8px 9px;
    border-radius:9px;
    background:rgba(255,255,255,.62);
}
.jc-composer-layout{
    grid-template-columns:minmax(0,1fr) 300px !important;
}
.jc-live-details-card{
    padding:20px !important;
}
.jc-recording-form-layout{
    grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr) !important;
}
@media(max-width:900px){
    .jc-recording-form-layout,
    .jc-composer-layout{grid-template-columns:1fr !important}
}


/* VIDEO STYLE TEMPLATE SELECTOR */
.jc-video-style-builder{
    padding:14px;
    border:1px solid rgba(47,128,237,.20);
    border-radius:15px;
    background:rgba(255,255,255,.66);
}
.jc-style-header strong,
.jc-style-header small{
    display:block;
}
.jc-style-header strong{
    color:#10243d;
    font-size:1rem;
}
.jc-style-header small{
    margin-top:4px;
    color:#64748b;
    font-size:.72rem;
}
.jc-style-options{
    display:grid;
    gap:8px;
    margin-top:13px;
}
.jc-style-option{
    position:relative;
    display:block;
    cursor:pointer;
}
.jc-style-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.jc-style-card{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px;
    border:2px solid #e5e7eb;
    border-radius:12px;
    background:#ffffff;
    transition:.18s ease;
}
.jc-style-option:hover .jc-style-card{
    border-color:#94a3b8;
    transform:translateY(-1px);
}
.jc-style-option input:checked + .jc-style-card{
    border-color:#2563eb;
    background:#eff6ff;
    box-shadow:0 7px 18px rgba(37,99,235,.12);
}
.jc-style-card b,
.jc-style-card small{
    display:block;
}
.jc-style-card b{
    color:#111827;
    font-size:.82rem;
}
.jc-style-card small{
    margin-top:2px;
    color:#64748b;
    font-size:.66rem;
}
.jc-style-thumb{
    width:58px;
    height:40px;
    flex:0 0 58px;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    border:1px solid rgba(15,23,42,.10);
}
.jc-style-thumb:before{
    content:"";
    position:absolute;
    left:6px;
    top:6px;
    width:23px;
    height:26px;
    border-radius:4px;
    background:rgba(255,255,255,.90);
}
.jc-style-thumb:after{
    content:"";
    position:absolute;
    right:6px;
    top:8px;
    width:18px;
    height:4px;
    border-radius:5px;
    background:currentColor;
    box-shadow:0 8px 0 currentColor,0 16px 0 currentColor;
    opacity:.72;
}
.thumb-plain{background:#f8fafc;color:#334155}
.thumb-premium{background:linear-gradient(135deg,#07152f,#1e3a8a);color:#60a5fa}
.thumb-elegant{background:linear-gradient(135deg,#fffdf8,#eee5d3);color:#a37a28}
.thumb-executive{background:linear-gradient(135deg,#eaf2ff,#bfdbfe);color:#1d4ed8}
.thumb-modern{background:linear-gradient(135deg,#ede9fe,#bfdbfe,#cffafe);color:#7c3aed}


/* COMPACT FORM AND STEP PANELS */
.jc-recording-form-layout{
    grid-template-columns:minmax(0,1.25fr) 310px !important;
    gap:16px !important;
}
.jc-recording-details,
.jc-recording-options,
.jc-composer-preview-card,
.jc-live-details-card{
    padding:18px !important;
    border-radius:17px !important;
}
.jc-section-title{margin-bottom:12px !important}
.jc-section-title h2{
    margin:5px 0 3px !important;
    font-size:1.45rem !important;
}
.jc-section-title p{
    margin:0 !important;
    font-size:.82rem !important;
}
.jc-form-grid{gap:11px !important}
.jc-field{gap:5px !important}
.jc-field label{
    font-size:.75rem !important;
    font-weight:800 !important;
}
.jc-field input,
.jc-field select,
.jc-field textarea{
    min-height:40px !important;
    padding:9px 11px !important;
    font-size:.88rem !important;
    border-radius:9px !important;
}
.jc-editor{
    min-height:105px !important;
    padding:11px !important;
    font-size:.88rem !important;
}
.jc-editor-toolbar button{
    min-width:34px !important;
    min-height:32px !important;
    font-size:.75rem !important;
}
.jc-option-group{
    padding:11px !important;
    gap:7px !important;
}
.jc-option-group>strong{font-size:.82rem !important}
.jc-option-group label{font-size:.78rem !important}
.jc-step-indicator button{
    min-height:46px !important;
    font-size:.82rem !important;
}
.jc-step-indicator button span{
    width:25px !important;
    height:25px !important;
}
.jc-composer-layout{
    grid-template-columns:minmax(0,1fr) 270px !important;
    gap:16px !important;
}
.jc-live-details-card h2{
    font-size:1.7rem !important;
}
.jc-live-details div{
    padding:8px 10px !important;
}
.jc-recorder-actions{
    gap:7px !important;
}
.jc-recorder-actions .jc-button{
    min-height:38px !important;
    padding:8px 11px !important;
    font-size:.76rem !important;
}

/* COMPACT TABBED TEMPLATE PICKER */
.jc-video-style-builder{
    padding:11px !important;
    border-radius:13px !important;
}
.jc-style-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}
.jc-style-header strong{
    font-size:.88rem !important;
}
.jc-style-header small{
    max-width:220px;
    font-size:.66rem !important;
    line-height:1.35;
}
#selectedVideoStyleLabel{
    flex:0 0 auto;
    padding:5px 7px;
    border-radius:999px;
    color:#ffffff;
    background:#2563eb;
    font-size:.61rem;
    font-weight:900;
}
.jc-template-tabs{
    display:flex;
    gap:5px;
    margin:10px 0 9px;
    overflow-x:auto;
    padding-bottom:2px;
}
.jc-template-tabs button{
    flex:0 0 auto;
    padding:6px 9px;
    border:1px solid #dbe3ed;
    border-radius:999px;
    color:#475569;
    background:#ffffff;
    font-size:.64rem;
    font-weight:900;
    cursor:pointer;
}
.jc-template-tabs button.active{
    color:#ffffff;
    border-color:#2563eb;
    background:#2563eb;
}
.jc-style-options{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px !important;
    margin-top:0 !important;
}
.jc-style-option[hidden]{display:none !important}
.jc-style-card{
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) 16px;
    gap:8px !important;
    min-height:58px;
    padding:7px !important;
    border-radius:10px !important;
}
.jc-style-thumb{
    width:50px !important;
    height:34px !important;
    flex-basis:50px !important;
}
.jc-style-thumb:before{
    left:5px !important;
    top:5px !important;
    width:22px !important;
    height:24px !important;
}
.jc-style-thumb:after{
    right:5px !important;
    top:7px !important;
    width:15px !important;
    height:3px !important;
    box-shadow:0 7px 0 currentColor,0 14px 0 currentColor !important;
}
.jc-style-card b{
    font-size:.69rem !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.jc-style-card small{
    font-size:.57rem !important;
    line-height:1.25;
}
.jc-style-card i{
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    align-self:center;
    border:1.5px solid #cbd5e1;
    border-radius:50%;
    color:transparent;
    font-style:normal;
    font-size:.55rem;
    font-weight:900;
}
.jc-style-option input:checked + .jc-style-card i{
    color:#ffffff;
    border-color:#2563eb;
    background:#2563eb;
}

/* EXTRA THUMBNAILS */
.thumb-recruitment{background:linear-gradient(135deg,#ecfdf5,#dbeafe);color:#047857}
.thumb-agency{background:linear-gradient(135deg,#ffffff,#cfe3ff);color:#1d4ed8}
.thumb-hospitality{background:linear-gradient(135deg,#fff7ed,#fed7aa);color:#c2410c}
.thumb-corporate{background:linear-gradient(135deg,#ffffff,#dbeafe);color:#1e40af}
.thumb-luxury{background:linear-gradient(135deg,#050505,#282828);color:#d4af37}
.thumb-midnight{background:linear-gradient(135deg,#020617,#172554);color:#facc15}
.thumb-beige{background:linear-gradient(135deg,#faf7f0,#dfceb2);color:#8a6d45}
.thumb-editorial{background:linear-gradient(135deg,#f7f3ec,#d6cec0);color:#111827}
.thumb-glass{background:linear-gradient(135deg,#8b5cf6,#3b82f6,#06b6d4);color:#ffffff}
.thumb-neon{background:linear-gradient(135deg,#020617,#111827);color:#22d3ee}
.thumb-softgray{background:linear-gradient(135deg,#f8fafc,#d8dee7);color:#64748b}
.thumb-nordic{background:linear-gradient(135deg,#ffffff,#dff3f4);color:#0f766e}

@media(max-width:1050px){
    .jc-recording-form-layout{grid-template-columns:1fr !important}
}
@media(max-width:650px){
    .jc-style-options{grid-template-columns:1fr !important}
    .jc-composer-layout{grid-template-columns:1fr !important}
}


/* STEP 1 / STEP 2 STRUCTURE FIX */
.jc-recording-form-layout{
    grid-template-columns:minmax(0,1fr) 285px !important;
    align-items:start !important;
}
.jc-recording-options{
    position:sticky;
    top:88px;
}
.jc-recording-options .jc-option-group{
    margin-bottom:10px;
}
.jc-step2-template-panel{
    margin-bottom:16px;
    padding:16px !important;
}
.jc-step2-template-title{
    margin-bottom:10px !important;
}
.jc-step2-template-title h2{
    font-size:1.35rem !important;
}
.jc-step2-template-panel .jc-video-style-builder{
    padding:10px !important;
    background:rgba(255,255,255,.68) !important;
}
.jc-step2-template-panel .jc-style-options{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.jc-step2-recording-heading{
    margin:18px 0 10px;
}
.jc-step2-recording-heading h2{
    margin:4px 0 0;
    color:#10243d;
    font-size:1.35rem;
}
.jc-composer-layout{
    grid-template-columns:minmax(0,1fr) 260px !important;
    align-items:start !important;
}
.jc-composer-preview-card{
    min-width:0;
}
.jc-recorder-actions{
    position:relative;
    z-index:10;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:12px !important;
    padding:10px !important;
    border:1px solid rgba(47,128,237,.18);
    border-radius:12px;
    background:rgba(255,255,255,.88) !important;
}
#openCamera{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
    background:#2563eb !important;
    box-shadow:0 7px 16px rgba(37,99,235,.22) !important;
}
#openCamera:hover{
    background:#1d4ed8 !important;
}
#startRecording{
    color:#ffffff !important;
}
.jc-composed-preview-wrap{
    width:100%;
    max-width:100%;
}
#compositeCanvas{
    width:100% !important;
    height:auto !important;
}
.jc-live-details-card{
    position:sticky !important;
    top:88px !important;
}

@media(max-width:1100px){
    .jc-step2-template-panel .jc-style-options{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media(max-width:900px){
    .jc-recording-form-layout,
    .jc-composer-layout{
        grid-template-columns:1fr !important;
    }
    .jc-recording-options,
    .jc-live-details-card{
        position:static !important;
    }
}
@media(max-width:650px){
    .jc-step2-template-panel .jc-style-options{
        grid-template-columns:1fr !important;
    }
}


/* FINAL SEARCH + COMPACT FORMS */
.jc-library-search{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:9px !important;
    align-items:center !important;
}
.jc-library-search input{
    width:100% !important;
    min-height:42px !important;
    padding:9px 12px !important;
    color:#10243d !important;
    border:1px solid #cfdceb !important;
    background:#ffffff !important;
}
.jc-library-search .jc-button,
.jc-library-search button{
    min-width:96px !important;
    min-height:42px !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
    background:#2563eb !important;
    opacity:1 !important;
}
.jc-library-search .jc-button:hover,
.jc-library-search button:hover{
    color:#ffffff !important;
    background:#1d4ed8 !important;
}
.jc-field input,
.jc-field select,
.jc-field textarea{
    font-size:.84rem !important;
}
.jc-recording-details .jc-form-grid{
    gap:10px !important;
}
.jc-step2-template-panel .jc-style-options{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.jc-style-card{
    min-height:54px !important;
}
.jc-style-card b{
    font-weight:700 !important;
}
@media(max-width:1050px){
    .jc-step2-template-panel .jc-style-options{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media(max-width:650px){
    .jc-library-search{
        grid-template-columns:1fr !important;
    }
    .jc-step2-template-panel .jc-style-options{
        grid-template-columns:1fr !important;
    }
}


/* READABLE SMALL TITLES AND DESCRIPTIONS */
.jc-card-label,.jc-eyebrow,.jc-section-title small,.jc-step2-template-title .jc-card-label{color:#1d4ed8 !important;font-weight:750 !important;opacity:1 !important}
.jc-page-heading p,.jc-section-title p,.jc-card p,.jc-option-group small,.jc-style-header small,.jc-style-card small,.jc-empty-state p{color:#475569 !important;opacity:1 !important}
.jc-section-title h2,.jc-card h2,.jc-card h3{color:#0f172a !important}
.jc-icon-actions{grid-template-columns:repeat(6,1fr) !important}
.jc-delete-button{color:#dc2626 !important}
.jc-delete-button:hover{color:#fff !important;border-color:#dc2626 !important;background:#dc2626 !important}
.jc-delete-button:disabled{opacity:.5;cursor:not-allowed}
.jc-compact-logo{width:86px !important;height:34px !important;padding:4px 6px !important;object-fit:contain !important}
@media(max-width:650px){.jc-icon-actions{grid-template-columns:repeat(3,1fr) !important}}


/* FULL 16:9 VIDEO VISIBILITY + BLUE PLAY BUTTON */
.jc-composer-layout{
    grid-template-columns:minmax(0,1fr) 230px !important;
    gap:16px !important;
}
.jc-composer-preview-card{
    padding:16px !important;
}
.jc-composed-preview-wrap{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-radius:16px !important;
    background:#07111f !important;
}
#compositeCanvas{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:contain !important;
    aspect-ratio:16 / 9 !important;
}

/* Video Library thumbnails: show the complete rectangle instead of cropping */
.jc-compact-thumb{
    aspect-ratio:16 / 9 !important;
    min-height:150px !important;
    background:#07111f !important;
}
.jc-compact-thumb video{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#07111f !important;
    opacity:1 !important;
}
.jc-thumb-play{
    width:58px !important;
    height:58px !important;
    color:#ffffff !important;
    border:2px solid rgba(255,255,255,.92) !important;
    background:#2563eb !important;
    box-shadow:0 10px 28px rgba(37,99,235,.34) !important;
}
.jc-thumb-play:hover{
    color:#ffffff !important;
    background:#1d4ed8 !important;
    transform:translate(-50%,-50%) scale(1.06) !important;
}
.jc-live-logo img{
    width:auto !important;
    max-width:210px !important;
    height:auto !important;
    max-height:62px !important;
    object-fit:contain !important;
}
.jc-default-logo-text{
    color:#0b3d91;
    font-size:1.35rem;
    font-weight:800;
}

@media(max-width:900px){
    .jc-composer-layout{grid-template-columns:1fr !important}
    .jc-compact-thumb{min-height:120px !important}
}