.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}
}


/* OUTPUT LANGUAGE PANEL */
.jc-output-language-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:18px;
    align-items:center;
    margin-bottom:16px;
    padding:16px !important;
    border:1px solid rgba(47,128,237,.24) !important;
    background:linear-gradient(145deg,rgba(47,128,237,.10),rgba(255,255,255,.88)) !important;
}
.jc-output-language-panel h2{
    margin:4px 0 3px;
    color:#10243d;
    font-size:1.25rem;
}
.jc-output-language-panel p{
    margin:0;
    color:#526b84;
    font-size:.78rem;
}
.jc-output-language-control label{
    display:block;
    margin-bottom:5px;
    color:#17324f;
    font-size:.72rem;
    font-weight:800;
}
.jc-output-language-control select{
    width:100%;
    min-height:42px;
    padding:9px 11px;
    border:1px solid #c9d8e9;
    border-radius:10px;
    color:#10243d;
    background:#ffffff;
    font-size:.84rem;
}
.jc-output-language-control select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
    outline:none;
}
@media(max-width:760px){
    .jc-output-language-panel{
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   VIDEO LIBRARY — LARGE, CLEAN, READABLE CARDS
   ========================================================== */
.jc-compact-library{
    grid-template-columns:repeat(auto-fill,minmax(310px,1fr)) !important;
    gap:22px !important;
    align-items:start;
}

.jc-compact-card{
    overflow:hidden !important;
    border:1px solid #dbe5f0 !important;
    border-radius:20px !important;
    background:#ffffff !important;
    box-shadow:0 14px 38px rgba(14,39,72,.09) !important;
}

.jc-compact-card:hover{
    transform:translateY(-4px) !important;
    border-color:rgba(47,128,237,.38) !important;
    box-shadow:0 24px 58px rgba(31,94,190,.16) !important;
}

.jc-compact-thumb{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-bottom:1px solid #e4ebf3;
    background:#020617 !important;
}

.jc-compact-thumb video{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    opacity:1 !important;
    background:#000 !important;
}

.jc-compact-logo{
    z-index:3 !important;
    top:14px !important;
    left:14px !important;
    width:auto !important;
    min-width:54px;
    max-width:145px !important;
    height:48px !important;
    padding:6px 9px !important;
    border:1px solid rgba(15,23,42,.10);
    border-radius:11px !important;
    object-fit:contain !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 8px 20px rgba(15,23,42,.15);
}

.jc-visibility-badge{
    z-index:5 !important;
    top:14px !important;
    right:14px !important;
    display:inline-flex !important;
    align-items:center;
    min-height:30px;
    padding:7px 11px !important;
    border:2px solid rgba(255,255,255,.82);
    border-radius:999px !important;
    color:#ffffff !important;
    font-size:.72rem !important;
    font-weight:900 !important;
    letter-spacing:.055em;
    line-height:1;
    box-shadow:0 7px 20px rgba(0,0,0,.22);
    opacity:1 !important;
}

.jc-visibility-public{background:#059669 !important}
.jc-visibility-unlisted{background:#d97706 !important}
.jc-visibility-private{background:#475569 !important}

.jc-thumb-play{
    z-index:4 !important;
    width:66px !important;
    height:66px !important;
    color:#ffffff !important;
    border:3px solid rgba(255,255,255,.88);
    background:#2563eb !important;
    box-shadow:0 13px 30px rgba(37,99,235,.36) !important;
    font-size:1.35rem !important;
    text-decoration:none !important;
}

.jc-thumb-play:hover{
    transform:translate(-50%,-50%) scale(1.08) !important;
    background:#1d4ed8 !important;
}

.jc-compact-body{
    padding:18px !important;
}

.jc-compact-body h3{
    margin:0 !important;
    color:#0f172a !important;
    font-size:1.18rem !important;
    line-height:1.2 !important;
    letter-spacing:-.015em;
}

.jc-compact-body>strong{
    display:block !important;
    margin-top:7px !important;
    color:#2563eb !important;
    font-size:.84rem !important;
    font-weight:800 !important;
    letter-spacing:.035em;
}

.jc-compact-body>p{
    margin:7px 0 13px !important;
    color:#52677e !important;
    font-size:.9rem !important;
    font-weight:600;
}

.jc-compact-meta{
    min-height:30px !important;
    gap:7px !important;
}

.jc-meta-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:28px;
    padding:6px 9px;
    border:1px solid #dce7f2;
    border-radius:999px;
    color:#334e68;
    background:#f7faff;
    font-size:.67rem;
    font-weight:800;
}

.jc-icon-actions{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:16px !important;
}

.jc-icon-action{
    min-width:0;
    min-height:58px !important;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:7px 3px !important;
    border:1px solid #dce6f1 !important;
    border-radius:11px !important;
    color:#214f82 !important;
    background:#f8fbff !important;
    text-decoration:none !important;
}

.jc-icon-action .jc-action-icon{
    display:block;
    font-size:1.28rem !important;
    line-height:1;
}

.jc-icon-action small{
    display:block;
    color:inherit;
    font-size:.54rem;
    font-weight:900;
    letter-spacing:.035em;
    line-height:1;
}

.jc-icon-action:hover{
    color:#ffffff !important;
    border-color:#2563eb !important;
    background:#2563eb !important;
    transform:translateY(-1px);
}

.jc-delete-button{
    color:#b42318 !important;
    background:#fff8f7 !important;
    border-color:#f3d0cc !important;
}

.jc-delete-button:hover{
    color:#ffffff !important;
    border-color:#dc2626 !important;
    background:#dc2626 !important;
}

@media(max-width:760px){
    .jc-compact-library{
        grid-template-columns:1fr !important;
    }
    .jc-icon-actions{
        grid-template-columns:repeat(3,1fr) !important;
    }
    .jc-icon-action{
        min-height:54px !important;
    }
}


/* BILLING V1 */
.jc-billing-layout{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
    gap:18px;
    margin:20px 0;
}
.jc-billing-form{display:grid;gap:14px;margin-top:18px}
.jc-payment-instructions{padding:22px!important}
.jc-payment-placeholder{
    min-height:180px;
    display:grid;
    place-items:center;
    margin:16px 0;
    border:2px dashed #9eb9d6;
    border-radius:16px;
    color:#47627f;
    background:#f5faff;
    font-size:.8rem;
    font-weight:900;
}
.jc-billing-warning{
    padding:13px;
    border:1px solid #fed7aa;
    border-radius:12px;
    color:#9a3412;
    background:#fff7ed;
    font-size:.78rem;
    line-height:1.5;
}
.jc-billing-upload-status{
    padding:12px;
    border-radius:10px;
    color:#17324f;
    background:#eef5ff;
}
.jc-billing-upload-status.success{color:#047857;background:#ecfdf5}
.jc-billing-upload-status.error{color:#b42318;background:#fff1f2}
.jc-billing-history{margin-top:20px}
.jc-table-wrap{overflow:auto}
.jc-data-table{width:100%;border-collapse:collapse}
.jc-data-table th,.jc-data-table td{
    padding:12px;
    border-bottom:1px solid #e2e8f0;
    text-align:left;
    vertical-align:top;
    font-size:.78rem;
}
.jc-data-table th{color:#52677e;background:#f8fafc;font-size:.66rem;letter-spacing:.04em}
.jc-data-table td small{display:block;margin-top:3px;color:#64748b}
.jc-payment-status{
    display:inline-flex;
    padding:6px 8px;
    border-radius:999px;
    font-size:.58rem;
    font-weight:900;
}
.jc-payment-status-auto_approved{color:#92400e;background:#fef3c7}
.jc-payment-status-approved{color:#047857;background:#d1fae5}
.jc-payment-status-rejected{color:#b42318;background:#fee2e2}
@media(max-width:850px){.jc-billing-layout{grid-template-columns:1fr}}

/* THREE-MONTH PRICING DISCOUNT */
.jc-glass-price-card p strong{
    color:#0b3d91;
    font-size:1rem;
}
.jc-glass-price-card p small{
    color:#047857;
    font-size:.72rem;
    font-weight:800;
}


/* BILLING CYCLE PICKER */
.jc-billing-cycle-picker>label{
    display:block;
    margin-bottom:7px;
    color:#17324f;
    font-size:.75rem;
    font-weight:850;
}
.jc-billing-cycle-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}
.jc-billing-cycle-options label{
    position:relative;
    display:block;
    cursor:pointer;
}
.jc-billing-cycle-options input{
    position:absolute;
    opacity:0;
}
.jc-billing-cycle-options span{
    display:block;
    min-height:62px;
    padding:12px;
    border:2px solid #dce6f1;
    border-radius:12px;
    background:#ffffff;
}
.jc-billing-cycle-options b,
.jc-billing-cycle-options small{
    display:block;
}
.jc-billing-cycle-options b{
    color:#17324f;
    font-size:.82rem;
}
.jc-billing-cycle-options small{
    margin-top:4px;
    color:#64748b;
    font-size:.68rem;
}
.jc-billing-cycle-options input:checked+span{
    border-color:#2563eb;
    background:#eff6ff;
    box-shadow:0 8px 22px rgba(37,99,235,.10);
}
.jc-billing-cycle-options .best-value small{
    color:#047857;
    font-weight:900;
}

/* AUTO-COMPUTED BILLING AMOUNT */
#billingAmountText[readonly]{
    color:#0b3d91!important;
    font-weight:850!important;
    background:#eef6ff!important;
    border-color:#9fc4f3!important;
}
#billingPlanPrice{
    display:block;
    margin-top:6px;
    padding:9px 11px;
    border:1px solid #d8e7f7;
    border-radius:9px;
    color:#173b61;
    background:#f7fbff;
    font-size:.72rem;
    font-weight:750;
    line-height:1.5;
}


/* PROTECTED PAYMENT QR */
.jc-protected-payment-qr{
    position:relative;
    display:grid;
    place-items:center;
    min-height:220px;
    margin:16px 0;
    padding:15px;
    border:1px solid #d6e3f0;
    border-radius:16px;
    background:#ffffff;
    overflow:hidden;
}
.jc-protected-payment-qr img{
    display:block;
    width:min(100%,260px);
    aspect-ratio:1/1;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}
.jc-protected-payment-qr span{
    margin-top:9px;
    color:#0b3d91;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.09em;
}


.jc-bank-details-box{margin:14px 0;padding:14px;border:1px solid #dce6f1;border-radius:13px;background:#f8fbff}
.jc-bank-details-box h3{margin:0 0 10px;color:#173b61;font-size:.9rem}
.jc-bank-details-box div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #e5edf5}
.jc-bank-details-box div:last-of-type{border-bottom:0}
.jc-bank-details-box span{color:#64748b;font-size:.68rem}
.jc-bank-details-box strong{color:#17324f;font-size:.75rem;text-align:right}
.jc-bank-details-box p{margin:10px 0 0;color:#52677e;font-size:.7rem;line-height:1.5}
.jc-image-size-note{display:block;margin-top:5px;color:#64748b;font-size:.65rem}


/* EXPIRED SUBSCRIPTION RECORDING LOCK */
.jc-recording-lock-screen{
    width:min(100%,760px);
    min-height:560px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    margin:28px auto;
    padding:42px;
    border:1px solid #d9e4ef;
    border-radius:24px;
    text-align:center;
    background:
        radial-gradient(circle at 50% 0%,rgba(47,128,237,.13),transparent 34%),
        linear-gradient(145deg,#ffffff,#f6faff);
    box-shadow:0 25px 70px rgba(15,39,72,.12);
}
.jc-recording-lock-icon{
    width:82px;
    height:82px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:24px;
    color:#ffffff;
    background:linear-gradient(135deg,#2563eb,#0b3d91);
    box-shadow:0 16px 36px rgba(37,99,235,.28);
    font-size:2rem;
}
.jc-recording-lock-screen h1{
    max-width:620px;
    margin:10px 0 12px;
    color:#10243d;
    font-size:clamp(2rem,5vw,3.4rem);
    line-height:1.02;
    letter-spacing:-.045em;
}
.jc-recording-lock-screen>p{
    max-width:640px;
    margin:0;
    color:#52677e;
    font-size:.94rem;
    line-height:1.65;
}
.jc-recording-lock-details{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:26px 0;
}
.jc-recording-lock-details div{
    padding:15px;
    border:1px solid #dce6f1;
    border-radius:13px;
    background:#ffffff;
}
.jc-recording-lock-details span,
.jc-recording-lock-details strong{
    display:block;
}
.jc-recording-lock-details span{
    color:#64748b;
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.045em;
    text-transform:uppercase;
}
.jc-recording-lock-details strong{
    margin-top:7px;
    color:#173b61;
    font-size:.88rem;
}
.jc-recording-lock-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}
.jc-recording-lock-screen>small{
    margin-top:18px;
    color:#7b8da1;
    font-size:.7rem;
}
.jc-subscription-expired-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    padding:14px 16px;
    border:1px solid #fecaca;
    border-radius:14px;
    background:#fff1f2;
}
.jc-subscription-expired-banner strong,
.jc-subscription-expired-banner span{
    display:block;
}
.jc-subscription-expired-banner strong{
    color:#b42318;
    font-size:.82rem;
}
.jc-subscription-expired-banner span{
    margin-top:3px;
    color:#7f1d1d;
    font-size:.72rem;
}
@media(max-width:650px){
    .jc-recording-lock-screen{
        min-height:0;
        margin:12px auto;
        padding:24px 16px;
        border-radius:17px;
    }
    .jc-recording-lock-details{
        grid-template-columns:1fr;
    }
    .jc-recording-lock-actions{
        width:100%;
        flex-direction:column;
    }
    .jc-recording-lock-actions .jc-button{
        width:100%;
    }
    .jc-subscription-expired-banner{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* FINAL EXPIRED RECORDING BANNER */
.jc-expired-recorder-banner{width:100%;display:grid;grid-template-columns:92px minmax(0,1fr);gap:22px;align-items:center;margin:0 0 24px;padding:28px;border:2px solid #fda4af;border-radius:20px;background:linear-gradient(135deg,#fff1f2,#ffffff 58%,#eff6ff);box-shadow:0 20px 55px rgba(190,24,93,.13)}
.jc-expired-recorder-banner-icon{width:82px;height:82px;display:grid;place-items:center;border-radius:22px;color:#fff;background:linear-gradient(135deg,#dc2626,#9f1239);box-shadow:0 14px 30px rgba(190,24,93,.25);font-size:2rem}
.jc-expired-recorder-banner-copy>span{color:#be123c;font-size:.74rem;font-weight:950;letter-spacing:.1em}
.jc-expired-recorder-banner h1{margin:7px 0 8px;color:#7f1d1d;font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.04em}
.jc-expired-recorder-banner p{max-width:820px;margin:0;color:#6b3440;font-size:.92rem;line-height:1.6}
.jc-expired-recorder-banner-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}
.jc-upgrade-recording-button{min-width:220px;min-height:54px!important;padding:14px 24px!important;font-size:.88rem!important;box-shadow:0 14px 32px rgba(37,99,235,.24)}
.jc-recording-disabled-area{position:relative;filter:grayscale(.15);opacity:.56;pointer-events:none;user-select:none}
.jc-recording-disabled-area:after{content:'SUBSCRIPTION EXPIRED — UPGRADE TO CONTINUE';position:absolute;inset:0;display:grid;place-items:center;padding:20px;border:2px dashed rgba(190,24,93,.32);border-radius:16px;color:#9f1239;background:rgba(255,255,255,.60);font-size:.9rem;font-weight:950;letter-spacing:.045em;text-align:center;z-index:10}
.jc-recording-is-restricted .jc-step-indicator{opacity:.55;pointer-events:none}
/* LARGE USER QR */
.jc-protected-payment-qr{min-height:410px!important;padding:22px!important}
.jc-protected-payment-qr img{width:min(100%,370px)!important;max-height:370px!important}
.jc-protected-payment-qr span{font-size:.8rem!important}
@media(max-width:700px){.jc-expired-recorder-banner{grid-template-columns:1fr;padding:20px;text-align:center}.jc-expired-recorder-banner-icon{margin:auto}.jc-expired-recorder-banner-actions{justify-content:center}.jc-upgrade-recording-button{width:100%}.jc-protected-payment-qr{min-height:330px!important}.jc-protected-payment-qr img{width:min(100%,300px)!important}}


/* LARGE SUBSCRIPTION EXPIRATION NOTICES — ALL USER PAGES */
.jc-expiry-hero-alert{
    width:100%;
    display:grid;
    grid-template-columns:96px minmax(0,1fr) auto;
    gap:24px;
    align-items:center;
    margin:0 0 26px;
    padding:30px;
    border:2px solid #fb7185;
    border-radius:22px;
    background:linear-gradient(135deg,#fff1f2 0%,#ffffff 58%,#eff6ff 100%);
    box-shadow:0 22px 60px rgba(159,18,57,.15);
}
.jc-expiry-hero-icon{
    width:88px;height:88px;display:grid;place-items:center;
    border-radius:24px;color:#fff;
    background:linear-gradient(135deg,#dc2626,#9f1239);
    box-shadow:0 15px 34px rgba(159,18,57,.28);
    font-size:2.15rem;
}
.jc-expiry-hero-copy>span{
    color:#be123c;font-size:.76rem;font-weight:950;letter-spacing:.11em;
}
.jc-expiry-hero-copy h1{
    margin:7px 0 9px;color:#7f1d1d;
    font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.02;letter-spacing:-.045em;
}
.jc-expiry-hero-copy p{
    max-width:850px;margin:0;color:#6b3440;font-size:1rem;line-height:1.65;
}
.jc-expiry-permissions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.jc-expiry-permissions span{
    padding:7px 10px;border:1px solid #fecdd3;border-radius:999px;
    color:#881337;background:rgba(255,255,255,.8);font-size:.69rem;font-weight:850;
}
.jc-expiry-hero-actions{display:flex;flex-direction:column;gap:9px;min-width:210px}
.jc-expiry-hero-actions .jc-button{justify-content:center;text-align:center}
.jc-expiry-date-card{
    min-width:180px;padding:18px;border:1px solid #fecdd3;border-radius:15px;
    text-align:center;background:#fff;
}
.jc-expiry-date-card span,.jc-expiry-date-card strong{display:block}
.jc-expiry-date-card span{color:#9f1239;font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.jc-expiry-date-card strong{margin-top:7px;color:#7f1d1d;font-size:1.05rem}
.jc-expiry-library-notice{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;
    margin-bottom:22px;padding:24px 26px;border:2px solid #fb7185;border-radius:20px;
    background:linear-gradient(135deg,#fff1f2,#fff 72%);box-shadow:0 16px 44px rgba(159,18,57,.12);
}
.jc-expiry-library-notice span{color:#be123c;font-size:.72rem;font-weight:950;letter-spacing:.09em}
.jc-expiry-library-notice h2{margin:6px 0;color:#7f1d1d;font-size:1.75rem}
.jc-expiry-library-notice p{margin:0;max-width:750px;color:#6b3440;font-size:.88rem;line-height:1.55}
.jc-subscription-expired-banner{display:none!important}
.jc-upgrade-recording-button{min-height:54px!important;padding:14px 24px!important;font-size:.85rem!important}
@media(max-width:980px){
  .jc-expiry-hero-alert{grid-template-columns:82px minmax(0,1fr)}
  .jc-expiry-hero-actions,.jc-expiry-date-card{grid-column:1/-1;width:100%;min-width:0}
  .jc-expiry-hero-actions{flex-direction:row}
}
@media(max-width:680px){
  .jc-expiry-hero-alert{grid-template-columns:1fr;padding:22px 16px;text-align:center}
  .jc-expiry-hero-icon{margin:auto}
  .jc-expiry-hero-copy h1{font-size:2.15rem}
  .jc-expiry-permissions{justify-content:center}
  .jc-expiry-hero-actions{flex-direction:column}
  .jc-expiry-hero-actions .jc-button{width:100%}
  .jc-expiry-library-notice{align-items:flex-start;flex-direction:column;padding:20px}
  .jc-expiry-library-notice .jc-button{width:100%}
}


.jc-verification-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:22px;padding:22px 24px;border:1px solid #bfdbfe;border-radius:20px;background:linear-gradient(135deg,#eff6ff,#fff);box-shadow:0 16px 42px rgba(37,99,235,.1)}
.jc-verification-hero.restricted{border-color:#fdba74;background:linear-gradient(135deg,#fff7ed,#fff)}
.jc-verification-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;color:#fff;background:#2563eb;font-size:1.6rem;font-weight:900}.jc-verification-hero.restricted .jc-verification-icon{background:#ea580c}
.jc-verification-copy>span{color:#2563eb;font-size:.68rem;font-weight:900;letter-spacing:.09em}.jc-verification-hero.restricted .jc-verification-copy>span{color:#c2410c}.jc-verification-copy h1{margin:6px 0;color:#10243d;font-size:1.65rem}.jc-verification-copy p{margin:0;color:#52677e;font-size:.78rem;line-height:1.55}
.jc-simple-auth-result,.jc-standalone-auth{width:min(92%,520px);margin:50px auto;padding:30px;text-align:center}.jc-result-icon{width:70px;height:70px;display:grid;place-items:center;margin:0 auto 15px;border-radius:20px;color:#fff;background:#2563eb;font-size:2rem;font-weight:900}.jc-forgot-link{text-align:right;margin-top:-3px}.jc-forgot-link a{color:#2563eb;font-size:.7rem;font-weight:800}
@media(max-width:760px){.jc-verification-hero{grid-template-columns:1fr;padding:18px}.jc-verification-actions .jc-button{width:100%}}


/* GLOBAL POPUP / TOAST NOTIFICATIONS */
.jc-toast-container{
    position:fixed;
    top:22px;
    right:22px;
    z-index:99999;
    display:grid;
    gap:10px;
    width:min(92vw,410px);
    pointer-events:none;
}
.jc-toast{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 28px;
    gap:11px;
    align-items:center;
    padding:15px;
    border:1px solid #dbe5ef;
    border-radius:15px;
    background:#ffffff;
    box-shadow:0 20px 55px rgba(15,39,72,.19);
    opacity:0;
    transform:translateY(-12px) scale(.98);
    transition:.22s ease;
    pointer-events:auto;
}
.jc-toast.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}
.jc-toast.is-leaving{
    opacity:0;
    transform:translateY(-8px) scale(.98);
}
.jc-toast-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#ffffff;
    font-size:1.1rem;
    font-weight:900;
}
.jc-toast-copy strong,
.jc-toast-copy span{
    display:block;
}
.jc-toast-copy strong{
    color:#10243d;
    font-size:.82rem;
}
.jc-toast-copy span{
    margin-top:3px;
    color:#5f7186;
    font-size:.72rem;
    line-height:1.45;
}
.jc-toast-close{
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:8px;
    color:#64748b;
    background:#f1f5f9;
    cursor:pointer;
    font-size:1.1rem;
}
.jc-toast-success{border-left:5px solid #10b981}
.jc-toast-success .jc-toast-icon{background:#10b981}
.jc-toast-error{border-left:5px solid #ef4444}
.jc-toast-error .jc-toast-icon{background:#ef4444}
.jc-toast-warning{border-left:5px solid #f59e0b}
.jc-toast-warning .jc-toast-icon{background:#f59e0b}
.jc-toast-info{border-left:5px solid #2563eb}
.jc-toast-info .jc-toast-icon{background:#2563eb}
@media(max-width:600px){
    .jc-toast-container{
        top:12px;
        right:12px;
        left:12px;
        width:auto;
    }
}

/* SINGLE PREMIUM SAAS BILLING */
.jc-single-premium-wrap{
    display:grid;
    gap:18px;
}
.jc-single-premium-grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
    gap:18px;
    align-items:start;
}
.jc-premium-saas-card{
    padding:28px;
    border:1px solid #cfe0f3;
    border-radius:22px;
    background:
        radial-gradient(circle at 100% 0%,rgba(37,99,235,.12),transparent 30%),
        linear-gradient(145deg,#ffffff,#f6faff);
    box-shadow:0 22px 60px rgba(15,39,72,.10);
}
.jc-premium-badge{
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    color:#ffffff;
    background:#2563eb;
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.08em;
}
.jc-premium-saas-top h2{
    max-width:680px;
    margin:14px 0 9px;
    color:#10243d;
    font-size:clamp(1.8rem,4vw,3rem);
    line-height:1.05;
    letter-spacing:-.04em;
}
.jc-premium-saas-top p{
    max-width:650px;
    margin:0;
    color:#52677e;
    font-size:.88rem;
    line-height:1.65;
}
.jc-premium-cycle-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:24px 0 15px;
}
.jc-cycle-choice{
    min-height:118px;
    padding:15px;
    border:2px solid #dce6f1;
    border-radius:15px;
    text-align:left;
    color:#17324f;
    background:#ffffff;
    cursor:pointer;
}
.jc-cycle-choice span,
.jc-cycle-choice strong,
.jc-cycle-choice small{
    display:block;
}
.jc-cycle-choice span{
    color:#64748b;
    font-size:.68rem;
    font-weight:900;
    text-transform:uppercase;
}
.jc-cycle-choice strong{
    margin-top:7px;
    color:#0b3d91;
    font-size:1.75rem;
}
.jc-cycle-choice small{
    margin-top:4px;
    color:#64748b;
    font-size:.67rem;
    line-height:1.45;
}
.jc-cycle-choice.active{
    border-color:#2563eb;
    background:#eff6ff;
    box-shadow:0 12px 30px rgba(37,99,235,.13);
}
.jc-currency-selector-row{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    gap:8px 12px;
    align-items:center;
    padding:13px;
    border:1px solid #dce6f1;
    border-radius:13px;
    background:#ffffff;
}
.jc-currency-selector-row label{
    color:#17324f;
    font-size:.72rem;
    font-weight:850;
}
.jc-currency-selector-row select{
    min-height:40px;
    padding:8px 10px;
    border:1px solid #cfdcea;
    border-radius:9px;
    background:#fff;
}
.jc-currency-selector-row small{
    grid-column:1/-1;
    color:#708399;
    font-size:.64rem;
}
.jc-premium-feature-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:22px 0;
}
.jc-premium-feature-list div{
    padding:10px 11px;
    border:1px solid #e0e9f2;
    border-radius:10px;
    color:#334e68;
    background:#ffffff;
    font-size:.72rem;
    font-weight:750;
}
.jc-premium-value-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.jc-premium-value-strip div{
    padding:12px;
    border-radius:12px;
    background:#0b2345;
}
.jc-premium-value-strip span,
.jc-premium-value-strip strong{
    display:block;
}
.jc-premium-value-strip span{
    color:#b8c7da;
    font-size:.58rem;
    font-weight:900;
    text-transform:uppercase;
}
.jc-premium-value-strip strong{
    margin-top:5px;
    color:#ffffff;
    font-size:.84rem;
}
.jc-premium-payment-box{
    position:sticky;
    top:18px;
}
.jc-protected-payment-qr-large img{
    width:min(100%,380px)!important;
}
.jc-premium-upgrade-button{
    width:100%;
    justify-content:center;
}
.jc-payment-trust-list{
    display:grid;
    gap:7px;
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid #e3ebf3;
}
.jc-payment-trust-list span{
    color:#52677e;
    font-size:.67rem;
}
.jc-business-contact-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 20px;
    border:1px solid #dce6f1;
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 10px 30px rgba(15,39,72,.06);
}
.jc-business-contact-strip span,
.jc-business-contact-strip strong,
.jc-business-contact-strip p{
    display:block;
}
.jc-business-contact-strip span{
    color:#2563eb;
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.08em;
}
.jc-business-contact-strip strong{
    margin-top:4px;
    color:#17324f;
    font-size:.9rem;
}
.jc-business-contact-strip p{
    margin:4px 0 0;
    color:#64748b;
    font-size:.7rem;
}
@media(max-width:1050px){
    .jc-single-premium-grid{
        grid-template-columns:1fr;
    }
    .jc-premium-payment-box{
        position:static;
    }
}
@media(max-width:650px){
    .jc-premium-saas-card{
        padding:18px;
    }
    .jc-premium-cycle-row,
    .jc-premium-feature-list,
    .jc-premium-value-strip{
        grid-template-columns:1fr;
    }
    .jc-currency-selector-row{
        grid-template-columns:1fr;
    }
    .jc-business-contact-strip{
        align-items:flex-start;
        flex-direction:column;
    }
    .jc-business-contact-strip .jc-button{
        width:100%;
        justify-content:center;
    }
}