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

.jc-plan-audience{display:inline-flex;margin-bottom:8px;padding:5px 8px;border-radius:999px;background:#eff6ff;color:#2563eb;font-size:.58rem;font-weight:900;letter-spacing:.07em;}


/* PRICING DISCOUNT EMPHASIS */
.jc-premium-saving-block{
    display:grid;
    gap:7px;
    margin:10px 0 15px;
}
.jc-premium-term{
    color:#17324f;
    font-size:1.02rem;
    font-weight:950;
    letter-spacing:.09em;
}
.jc-premium-regular{
    color:#64748b;
    font-size:.76rem;
    font-weight:750;
}
.jc-premium-regular del{
    color:#94a3b8;
    font-size:.92rem;
}
.jc-premium-save-badge,
.jc-billing-save-red{
    display:inline-flex;
    width:max-content;
    align-items:center;
    padding:9px 13px;
    border-radius:999px;
    color:#ffffff;
    background:linear-gradient(135deg,#ef4444,#b91c1c);
    box-shadow:0 12px 25px rgba(220,38,38,.25);
    font-size:.76rem;
    font-weight:950;
    letter-spacing:.035em;
}
.jc-billing-regular-price{
    margin-bottom:8px!important;
}
.jc-cycle-choice .jc-billing-save-red{
    margin-top:9px;
}

/* RECORDINGS & FILES */
.jc-records-files-heading{
    align-items:flex-start;
}
.jc-records-files-actions{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}
.jc-file-upload-panel{
    display:grid;
    gap:14px;
    margin-bottom:18px;
    padding:18px;
    border:1px solid #dce6f1;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 15px 38px rgba(15,39,72,.07);
}
.jc-file-upload-panel.is-disabled{
    opacity:.55;
    pointer-events:none;
}
.jc-upload-dropzone{
    display:grid;
    place-items:center;
    min-height:245px;
    padding:25px;
    border:2px dashed #b9cce1;
    border-radius:16px;
    text-align:center;
    background:#f7faff;
    transition:.2s ease;
}
.jc-upload-dropzone.is-dragging{
    border-color:#2563eb;
    background:#eaf3ff;
    transform:scale(1.005);
}
.jc-upload-cloud-icon{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:#ffffff;
    background:linear-gradient(135deg,#2f80ed,#0b4fa2);
    font-size:1.8rem;
}
.jc-upload-dropzone h2{
    margin:13px 0 5px;
    color:#17324f;
    font-size:1.2rem;
}
.jc-upload-dropzone p{
    margin:0 0 14px;
    color:#64748b;
    font-size:.75rem;
}
.jc-upload-options{
    display:grid;
    grid-template-columns:minmax(220px,.35fr) minmax(0,1fr);
    gap:12px;
    align-items:end;
}
.jc-upload-original-note{
    padding:12px 14px;
    border:1px solid #bfdbfe;
    border-radius:12px;
    background:#eff6ff;
}
.jc-upload-original-note strong,
.jc-upload-original-note span{
    display:block;
}
.jc-upload-original-note strong{
    color:#0b3d91;
    font-size:.75rem;
}
.jc-upload-original-note span{
    margin-top:4px;
    color:#52677e;
    font-size:.67rem;
}
.jc-upload-queue{
    display:grid;
    gap:8px;
}
.jc-upload-queue-item{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:11px;
    border:1px solid #dce6f1;
    border-radius:12px;
    background:#fbfdff;
}
.jc-upload-file-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:#2563eb;
    background:#dbeafe;
    font-weight:900;
}
.jc-upload-file-copy strong,
.jc-upload-file-copy span,
.jc-upload-file-copy small{
    display:block;
}
.jc-upload-file-copy strong{
    color:#17324f;
    font-size:.73rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jc-upload-file-copy span,
.jc-upload-file-copy small{
    margin-top:3px;
    color:#64748b;
    font-size:.62rem;
}
.jc-upload-progress{
    height:6px;
    margin-top:7px;
    overflow:hidden;
    border-radius:999px;
    background:#e2e8f0;
}
.jc-upload-progress i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:#2563eb;
    transition:width .15s linear;
}
.jc-upload-queue-item.is-success{
    border-color:#a7f3d0;
    background:#f0fdf4;
}
.jc-upload-queue-item.is-success .jc-upload-progress i{
    background:#10b981;
}
.jc-upload-queue-item.is-error{
    border-color:#fecaca;
    background:#fff1f2;
}
.jc-upload-retry{
    padding:7px 10px;
    border:0;
    border-radius:8px;
    color:#fff;
    background:#ef4444;
    cursor:pointer;
    font-size:.65rem;
    font-weight:800;
}
.jc-files-toolbar{
    margin-bottom:10px;
}
.jc-file-filter-tabs{
    display:flex;
    gap:7px;
    overflow:auto;
    margin-bottom:14px;
    padding-bottom:3px;
}
.jc-file-filter-tabs a{
    flex:0 0 auto;
    padding:9px 13px;
    border:1px solid #dce6f1;
    border-radius:999px;
    color:#52677e;
    background:#ffffff;
    text-decoration:none;
    font-size:.68rem;
    font-weight:850;
}
.jc-file-filter-tabs a.active{
    color:#ffffff;
    border-color:#2563eb;
    background:#2563eb;
}
.jc-files-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
}
.jc-files-empty{
    grid-column:1/-1;
}
.jc-empty-file-icon{
    font-size:2rem;
}
.jc-file-card{
    overflow:hidden;
    border:1px solid #dce6f1;
    border-radius:15px;
    background:#ffffff;
    box-shadow:0 10px 26px rgba(15,39,72,.06);
}
.jc-file-preview{
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#eef3f8;
}
.jc-file-preview img,
.jc-file-preview video{
    width:100%;
    height:100%;
    object-fit:cover;
}
.jc-file-type-icon{
    font-size:3rem;
}
.jc-file-play{
    position:absolute;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#ffffff;
    background:rgba(11,61,145,.9);
}
.jc-file-card-body{
    padding:12px;
}
.jc-file-card-body h3{
    margin:0;
    overflow:hidden;
    color:#17324f;
    font-size:.78rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jc-file-card-body p{
    margin:5px 0 0;
    color:#64748b;
    font-size:.62rem;
}
.jc-photo-copy-badge{
    display:inline-flex;
    margin-top:8px;
    padding:5px 7px;
    border-radius:999px;
    color:#047857;
    background:#d1fae5;
    font-size:.52rem;
    font-weight:900;
}
.jc-file-card-actions{
    display:flex;
    gap:7px;
    margin-top:10px;
}
.jc-file-card-actions a{
    flex:1;
    padding:7px;
    border-radius:8px;
    color:#0b3d91;
    background:#eff6ff;
    text-align:center;
    text-decoration:none;
    font-size:.62rem;
    font-weight:850;
}
.jc-public-file-page{
    min-height:80vh;
    display:grid;
    place-items:center;
    padding:30px 15px;
}
.jc-public-file-card{
    width:min(100%,850px);
    padding:24px;
    border:1px solid #dce6f1;
    border-radius:18px;
    background:#ffffff;
    text-align:center;
}
.jc-public-file-card img,
.jc-public-file-card video{
    display:block;
    max-width:100%;
    max-height:70vh;
    margin:18px auto;
    border-radius:13px;
}
    margin:25px 0;
    font-size:5rem;
}
@media(max-width:1100px){
    .jc-files-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
    .jc-files-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .jc-upload-options{grid-template-columns:1fr}
}
@media(max-width:520px){
    .jc-files-grid{grid-template-columns:1fr}
    .jc-records-files-actions{width:100%}
    .jc-records-files-actions .jc-button{width:100%;justify-content:center}
}


/* FOLDERS, GALLERY, PRIVATE PEOPLE SHARING */
.jc-folder-breadcrumb{
    display:flex;align-items:center;gap:8px;margin:4px 0 13px;color:#64748b;font-size:.72rem
}
.jc-folder-breadcrumb a{color:#2563eb;text-decoration:none;font-weight:800}
.jc-folder-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:14px
}
.jc-folder-card{
    padding:13px;border:1px solid #dce6f1;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(15,39,72,.05)
}
.jc-folder-open{
    display:flex;align-items:center;gap:10px;color:#17324f;text-decoration:none
}
.jc-folder-open span{font-size:2rem}
.jc-folder-open strong{font-size:.77rem}
.jc-folder-actions{display:flex;gap:6px;margin-top:11px}
.jc-folder-actions button{
    flex:1;padding:7px;border:0;border-radius:8px;background:#eff6ff;color:#0b3d91;font-size:.58rem;font-weight:850;cursor:pointer
}
.jc-folder-actions .jc-folder-delete{color:#b91c1c;background:#fee2e2}
.jc-file-card-actions{flex-wrap:wrap}
.jc-file-card-actions button{
    flex:1;padding:7px;border:0;border-radius:8px;color:#0b3d91;background:#eff6ff;font-size:.6rem;font-weight:850;cursor:pointer
}
.jc-file-card-actions .jc-delete-file-button{color:#b91c1c;background:#fee2e2}
.jc-gallery-lightbox{
    position:fixed;inset:0;z-index:100000;display:none;grid-template-rows:minmax(0,1fr) auto;background:rgba(3,12,28,.94);padding:20px
}
.jc-gallery-lightbox.open{display:grid}
.jc-gallery-stage{display:grid;place-items:center;min-height:0}
.jc-gallery-stage img,.jc-gallery-stage video{max-width:94vw;max-height:76vh;border-radius:12px}
.jc-gallery-close{
    position:absolute;top:15px;right:17px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#10243d;font-size:1.6rem;cursor:pointer
}
.jc-gallery-info{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#fff;padding:12px 4px}
.jc-gallery-info h3{margin:0;font-size:.9rem}
.jc-gallery-actions{display:flex;gap:8px;flex-wrap:wrap}
.jc-button-danger{color:#fff!important;background:#dc2626!important}
.jc-invite-copy{display:flex;gap:7px;margin-top:9px}
.jc-invite-copy input{min-width:0;flex:1}
.jc-private-shared-view{margin:20px auto}
.jc-file-filter-tabs button{
    flex:0 0 auto;padding:9px 13px;border:1px solid #dce6f1;border-radius:999px;color:#52677e;background:#fff;font-size:.68rem;font-weight:850;cursor:pointer
}
.jc-file-filter-tabs button.active{color:#fff;border-color:#2563eb;background:#2563eb}
@media(max-width:900px){.jc-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
    .jc-folder-grid{grid-template-columns:1fr}
    .jc-gallery-info{align-items:flex-start;flex-direction:column}
    .jc-gallery-actions{width:100%}
    .jc-gallery-actions .jc-button{flex:1;justify-content:center}
}

.jc-modal-backdrop.open{
    pointer-events:auto;
    opacity:1;
}


/* MINIMAL WORKSPACE TABS + MULTI SELECT */
.jc-workspace-subtabs{
    display:flex;
    gap:7px;
    margin:0 0 16px;
    padding:6px;
    border:1px solid #dce6f1;
    border-radius:14px;
    background:#ffffff;
    width:max-content;
    max-width:100%;
    overflow:auto;
}
.jc-workspace-subtabs a{
    flex:0 0 auto;
    padding:9px 15px;
    border-radius:10px;
    color:#52677e;
    text-decoration:none;
    font-size:.72rem;
    font-weight:900;
}
.jc-workspace-subtabs a.active{
    color:#ffffff;
    background:#2563eb;
}
.jc-bulk-action-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
    padding:13px 15px;
    border:1px solid #bfdbfe;
    border-radius:14px;
    background:#eff6ff;
}
.jc-bulk-action-bar[hidden]{display:none!important}
.jc-bulk-action-bar strong,
.jc-bulk-action-bar span{display:block}
.jc-bulk-action-bar strong{color:#0b3d91;font-size:.8rem}
.jc-bulk-action-bar span{margin-top:3px;color:#52677e;font-size:.65rem}
.jc-bulk-actions{display:flex;gap:7px;flex-wrap:wrap}
.jc-file-card,.jc-folder-card{position:relative}
.jc-select-box{
    position:absolute;
    top:9px;
    left:9px;
    z-index:8;
    width:30px;
    height:30px;
    cursor:pointer;
}
.jc-select-box[hidden]{display:none!important}
.jc-select-box input{
    position:absolute;
    opacity:0;
}
.jc-select-box span{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:2px solid #ffffff;
    border-radius:9px;
    color:transparent;
    background:rgba(15,39,72,.65);
    box-shadow:0 5px 15px rgba(0,0,0,.18);
    font-weight:950;
}
.jc-select-box input:checked + span{
    color:#ffffff;
    background:#2563eb;
}
.jc-confirm-note{
    padding:11px 12px;
    border:1px solid #fde68a;
    border-radius:10px;
    color:#92400e;
    background:#fffbeb;
    font-size:.68rem;
    line-height:1.5;
}
@media(max-width:700px){
    .jc-bulk-action-bar{align-items:flex-start;flex-direction:column}
    .jc-bulk-actions{width:100%}
    .jc-bulk-actions .jc-button{flex:1;justify-content:center}
}

/* FOLDER CONTENT TOOLBAR */
.jc-folder-content-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:4px 0 12px;
    padding:11px 13px;
    border:1px solid #dce6f1;
    border-radius:13px;
    background:#ffffff;
}
.jc-folder-content-toolbar h2{
    margin:3px 0 0;
    color:#17324f;
    font-size:.92rem;
}
.jc-folder-content-toolbar .jc-button{
    flex:0 0 auto;
}
@media(max-width:600px){
    .jc-folder-content-toolbar{
        align-items:stretch;
        flex-direction:column;
    }
    .jc-folder-content-toolbar .jc-button{
        width:100%;
        justify-content:center;
    }
}

/* COMPACT MOBILE-STYLE FILE MANAGER */
.jc-workspace-subtabs{
    gap:4px!important;
    padding:4px!important;
    margin-bottom:10px!important;
    border-radius:11px!important;
}
.jc-workspace-subtabs a{
    padding:7px 11px!important;
    border-radius:8px!important;
    font-size:.64rem!important;
    line-height:1!important;
}

.jc-records-files-heading{
    margin-bottom:10px!important;
}
.jc-records-files-heading h1{
    font-size:1.35rem!important;
}
.jc-records-files-heading p{
    font-size:.68rem!important;
}
.jc-records-files-actions{
    gap:6px!important;
}
.jc-records-files-actions .jc-button{
    min-height:34px!important;
    padding:7px 10px!important;
    border-radius:9px!important;
    font-size:.62rem!important;
}

.jc-file-upload-panel{
    gap:9px!important;
    margin-bottom:11px!important;
    padding:11px!important;
    border-radius:13px!important;
}
.jc-upload-dropzone{
    min-height:155px!important;
    padding:16px!important;
    border-radius:12px!important;
}
.jc-upload-cloud-icon{
    width:44px!important;
    height:44px!important;
    border-radius:12px!important;
    font-size:1.25rem!important;
}
.jc-upload-dropzone h2{
    margin:8px 0 3px!important;
    font-size:.84rem!important;
}
.jc-upload-dropzone p{
    margin-bottom:9px!important;
    font-size:.61rem!important;
}
.jc-upload-dropzone .jc-button{
    min-height:32px!important;
    padding:7px 10px!important;
    font-size:.62rem!important;
}
.jc-upload-options{
    gap:7px!important;
}
.jc-upload-original-note{
    padding:8px 10px!important;
    border-radius:9px!important;
}
.jc-upload-original-note strong{
    font-size:.64rem!important;
}
.jc-upload-original-note span{
    font-size:.56rem!important;
}

.jc-library-search{
    gap:6px!important;
}
.jc-library-search input{
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:.65rem!important;
}
.jc-library-search .jc-button{
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:.62rem!important;
}

.jc-file-filter-tabs{
    gap:4px!important;
    margin-bottom:9px!important;
}
.jc-file-filter-tabs a,
.jc-file-filter-tabs button{
    padding:7px 10px!important;
    font-size:.59rem!important;
}

.jc-folder-content-toolbar{
    min-height:44px!important;
    margin:3px 0 8px!important;
    padding:7px 9px!important;
    border-radius:10px!important;
}
.jc-folder-content-toolbar .jc-card-label{
    font-size:.5rem!important;
}
.jc-folder-content-toolbar h2{
    margin-top:1px!important;
    font-size:.72rem!important;
}
.jc-folder-content-toolbar .jc-button{
    min-height:30px!important;
    padding:6px 9px!important;
    border-radius:8px!important;
    font-size:.58rem!important;
}

.jc-bulk-action-bar{
    min-height:44px!important;
    gap:8px!important;
    margin-bottom:8px!important;
    padding:7px 9px!important;
    border-radius:10px!important;
}
.jc-bulk-action-bar strong{
    font-size:.65rem!important;
}
.jc-bulk-action-bar span{
    font-size:.54rem!important;
}
.jc-bulk-actions{
    gap:4px!important;
}
.jc-bulk-actions .jc-button{
    min-height:29px!important;
    padding:6px 8px!important;
    border-radius:7px!important;
    font-size:.54rem!important;
}

.jc-folder-breadcrumb{
    gap:5px!important;
    margin-bottom:8px!important;
    font-size:.6rem!important;
}
.jc-folder-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:7px!important;
    margin-bottom:9px!important;
}
.jc-folder-card{
    min-height:88px!important;
    padding:8px!important;
    border-radius:11px!important;
}
.jc-folder-open{
    gap:6px!important;
}
.jc-folder-open span{
    font-size:1.35rem!important;
}
.jc-folder-open strong{
    font-size:.62rem!important;
    line-height:1.2!important;
}
.jc-folder-actions{
    gap:4px!important;
    margin-top:7px!important;
}
.jc-folder-actions button{
    padding:5px 4px!important;
    border-radius:6px!important;
    font-size:.48rem!important;
    line-height:1.15!important;
}

.jc-files-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:7px!important;
}
.jc-file-card{
    border-radius:11px!important;
}
.jc-file-preview{
    aspect-ratio:1/1!important;
}
.jc-file-type-icon{
    font-size:2rem!important;
}
.jc-file-play{
    width:36px!important;
    height:36px!important;
    font-size:.7rem!important;
}
.jc-visibility-badge{
    top:6px!important;
    right:6px!important;
    padding:4px 6px!important;
    font-size:.45rem!important;
}
.jc-file-card-body{
    padding:8px!important;
}
.jc-file-card-body h3{
    font-size:.62rem!important;
}
.jc-file-card-body p{
    margin-top:3px!important;
    font-size:.5rem!important;
}
.jc-photo-copy-badge{
    margin-top:5px!important;
    padding:4px 5px!important;
    font-size:.42rem!important;
}
.jc-file-card-actions{
    gap:4px!important;
    margin-top:6px!important;
}
.jc-file-card-actions a,
.jc-file-card-actions button{
    min-height:26px!important;
    padding:5px 4px!important;
    border-radius:6px!important;
    font-size:.48rem!important;
    line-height:1.1!important;
}

.jc-select-box{
    top:5px!important;
    left:5px!important;
    width:25px!important;
    height:25px!important;
}
.jc-select-box span{
    width:25px!important;
    height:25px!important;
    border-radius:7px!important;
    font-size:.6rem!important;
}

.jc-upload-queue-item{
    grid-template-columns:34px minmax(0,1fr) auto!important;
    gap:7px!important;
    padding:7px!important;
    border-radius:9px!important;
}
.jc-upload-file-icon{
    width:32px!important;
    height:32px!important;
    border-radius:8px!important;
    font-size:.7rem!important;
}
.jc-upload-file-copy strong{
    font-size:.61rem!important;
}
.jc-upload-file-copy span,
.jc-upload-file-copy small{
    font-size:.51rem!important;
}
.jc-upload-progress{
    height:4px!important;
    margin-top:5px!important;
}
.jc-upload-retry{
    padding:5px 7px!important;
    border-radius:6px!important;
    font-size:.52rem!important;
}

.jc-attachment-modal{
    width:min(94%,480px)!important;
    border-radius:15px!important;
}
.jc-modal-head{
    padding:11px 13px!important;
}
.jc-modal-head h3{
    font-size:.78rem!important;
}
.jc-modal-body{
    padding:12px!important;
}
.jc-modal-body .jc-field label{
    font-size:.58rem!important;
}
.jc-modal-body input,
.jc-modal-body select{
    min-height:34px!important;
    padding:7px 9px!important;
    font-size:.62rem!important;
}
.jc-modal-body .jc-button{
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:.61rem!important;
}
.jc-confirm-note{
    padding:8px 9px!important;
    border-radius:8px!important;
    font-size:.57rem!important;
}

.jc-gallery-info{
    padding:8px 2px!important;
}
.jc-gallery-info h3{
    font-size:.7rem!important;
}
.jc-gallery-actions{
    gap:5px!important;
}
.jc-gallery-actions .jc-button{
    min-height:31px!important;
    padding:6px 9px!important;
    font-size:.56rem!important;
}

@media(max-width:1250px){
    .jc-folder-grid,
    .jc-files-grid{
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
    }
}
@media(max-width:900px){
    .jc-folder-grid,
    .jc-files-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}
@media(max-width:640px){
    .jc-app-content{
        padding:10px!important;
    }
    .jc-folder-grid,
    .jc-files-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
    }
    .jc-folder-card{
        min-height:82px!important;
    }
    .jc-records-files-actions{
        width:100%!important;
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .jc-records-files-actions .jc-button{
        width:100%!important;
        justify-content:center!important;
    }
    .jc-folder-content-toolbar{
        flex-direction:row!important;
        align-items:center!important;
    }
    .jc-folder-content-toolbar .jc-button{
        width:auto!important;
    }
    .jc-bulk-action-bar{
        flex-direction:column!important;
        align-items:stretch!important;
    }
    .jc-bulk-actions{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

/* LARGE PAGE HEADER + CLEAN COMPACT GALLERY */
.jc-workspace-subtabs{
    gap:8px!important;
    padding:7px!important;
    margin-bottom:20px!important;
    border-radius:16px!important;
}
.jc-workspace-subtabs a{
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    padding:11px 20px!important;
    border-radius:11px!important;
    font-size:.78rem!important;
}

.jc-records-files-heading{
    margin-bottom:18px!important;
}
.jc-records-files-heading .jc-eyebrow{
    font-size:.65rem!important;
}
.jc-records-files-heading h1{
    font-size:clamp(2rem,4vw,3.15rem)!important;
    line-height:1.02!important;
}
.jc-records-files-heading p{
    max-width:720px!important;
    font-size:.9rem!important;
    line-height:1.65!important;
}
.jc-records-files-actions{
    gap:10px!important;
}
.jc-records-files-actions .jc-button{
    min-height:46px!important;
    padding:11px 17px!important;
    border-radius:12px!important;
    font-size:.72rem!important;
}

.jc-folder-content-toolbar{
    min-height:46px!important;
    padding:7px 9px!important;
}
.jc-folder-toolbar-title h2{
    margin:2px 0 0!important;
    font-size:.73rem!important;
}
.jc-inline-selection-tools{
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
}
.jc-select-all-label{
    display:flex;
    align-items:center;
    gap:5px;
    min-height:28px;
    padding:5px 7px;
    border:1px solid #dce6f1;
    border-radius:7px;
    color:#52677e;
    background:#fff;
    font-size:.52rem;
    font-weight:850;
    cursor:pointer;
}
.jc-select-all-label input{
    width:13px;
    height:13px;
    margin:0;
}
.jc-small-action-button{
    min-height:28px;
    padding:5px 8px;
    border:1px solid #dce6f1;
    border-radius:7px;
    color:#0b3d91;
    background:#eff6ff;
    font-size:.52rem;
    font-weight:850;
    cursor:pointer;
}
.jc-small-action-button:disabled{
    opacity:.42;
    cursor:not-allowed;
}

.jc-photo-click-target{
    cursor:zoom-in;
}
.jc-file-card[data-file-type="photo"] .jc-file-card-body{
    padding:6px 7px!important;
}
.jc-file-card[data-file-type="photo"] .jc-file-card-body h3{
    font-size:.57rem!important;
}
.jc-file-card[data-file-type="photo"] .jc-file-card-body p{
    font-size:.46rem!important;
}
.jc-file-card[data-file-type="photo"] .jc-photo-copy-badge{
    display:none!important;
}

.jc-gallery-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    color:#10243d;
    background:rgba(255,255,255,.92);
    font-size:1.35rem;
    cursor:pointer;
}
.jc-gallery-prev{left:10px}
.jc-gallery-next{right:10px}
.jc-gallery-stage{
    position:relative;
}

@media(max-width:650px){
    .jc-workspace-subtabs{
        width:100%!important;
    }
    .jc-workspace-subtabs a{
        flex:1 0 auto!important;
        justify-content:center!important;
        min-height:42px!important;
        padding:10px 14px!important;
        font-size:.7rem!important;
    }
    .jc-records-files-heading h1{
        font-size:2rem!important;
    }
    .jc-records-files-heading p{
        font-size:.78rem!important;
    }
    .jc-records-files-actions{
        display:grid!important;
        grid-template-columns:1fr!important;
    }
    .jc-records-files-actions .jc-button{
        min-height:44px!important;
        font-size:.7rem!important;
    }
    .jc-folder-content-toolbar{
        align-items:flex-start!important;
        flex-direction:column!important;
    }
    .jc-inline-selection-tools{
        width:100%;
    }
    .jc-select-all-label,
    .jc-small-action-button{
        flex:1;
        justify-content:center;
        text-align:center;
    }
}


/* REGISTERED PEOPLE SEARCH + FOLDER VISIBILITY */
.jc-folder-open > div{
    min-width:0;
}
.jc-folder-visibility{
    display:block;
    margin-top:3px;
    color:#64748b;
    font-size:.44rem;
    font-weight:850;
}
.jc-user-search-results{
    max-height:270px;
    overflow:auto;
    border:1px solid #dce6f1;
    border-radius:11px;
    background:#f8fbff;
}
.jc-user-search-empty{
    padding:18px;
    color:#64748b;
    text-align:center;
    font-size:.62rem;
}
.jc-user-result{
    display:grid;
    grid-template-columns:18px 34px minmax(0,1fr);
    gap:8px;
    align-items:center;
    padding:9px 10px;
    border-bottom:1px solid #e8eef5;
    cursor:pointer;
}
.jc-user-result:last-child{
    border-bottom:0;
}
.jc-user-result:hover{
    background:#eef6ff;
}
.jc-user-result input{
    width:15px!important;
    height:15px!important;
    min-height:0!important;
    margin:0;
}
.jc-user-avatar{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#ffffff;
    background:#2563eb;
    font-size:.68rem;
    font-weight:950;
}
.jc-user-details{
    min-width:0;
}
.jc-user-details strong,
.jc-user-details small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jc-user-details strong{
    color:#17324f;
    font-size:.66rem;
}
.jc-user-details small{
    margin-top:2px;
    color:#64748b;
    font-size:.54rem;
}
.jc-selected-people-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-radius:9px;
    color:#0b3d91;
    background:#eff6ff;
}
.jc-selected-people-summary strong{
    font-size:.61rem;
}
.jc-selected-people-summary button{
    padding:4px 7px;
    border:0;
    border-radius:6px;
    color:#b91c1c;
    background:#fee2e2;
    font-size:.52rem;
    font-weight:850;
    cursor:pointer;
}
.jc-visibility-option{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    gap:9px;
    align-items:flex-start;
    padding:10px;
    border:1px solid #dce6f1;
    border-radius:10px;
    cursor:pointer;
}
.jc-visibility-option:hover{
    border-color:#93c5fd;
    background:#f6faff;
}
.jc-visibility-option input{
    width:15px!important;
    height:15px!important;
    min-height:0!important;
    margin-top:2px;
}
.jc-visibility-option strong,
.jc-visibility-option small{
    display:block;
}
.jc-visibility-option strong{
    color:#17324f;
    font-size:.68rem;
}
.jc-visibility-option small{
    margin-top:3px;
    color:#64748b;
    font-size:.56rem;
    line-height:1.45;
}
.jc-public-link-result{
    display:flex;
    gap:6px;
    margin-top:8px;
}
.jc-public-link-result input{
    min-width:0;
    flex:1;
}


/* SHARING INDICATORS + EXPIRATION */
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin-top:4px;
    padding:4px 6px;
    border-radius:999px;
    color:#5b21b6;
    background:#ede9fe;
    font-size:.48rem;
    font-weight:900;
}
.jc-share-expiry{
    display:block;
    margin-top:5px;
    color:#b45309;
    font-size:.54rem;
    font-weight:850;
}
#sharePeopleForm textarea{
    width:100%;
    min-height:72px;
    padding:8px 9px;
    border:1px solid #dce6f1;
    border-radius:9px;
    resize:vertical;
    font:inherit;
}


/* LARGER READABLE FILE UI + VIEW TRACKING */
.jc-folder-open strong{
    font-size:.76rem!important;
}
.jc-folder-visibility{
    font-size:.56rem!important;
}
.jc-file-card-body h3{
    font-size:.72rem!important;
}
.jc-file-card-body p{
    font-size:.58rem!important;
}
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    width:max-content!important;
    max-width:100%!important;
    margin-top:7px!important;
    padding:6px 9px!important;
    border:0!important;
    border-radius:999px!important;
    color:#5b21b6!important;
    background:#ede9fe!important;
    font-size:.58rem!important;
    font-weight:900!important;
    cursor:pointer!important;
}
    background:#ddd6fe!important;
}
.jc-folder-actions button,
.jc-file-card-actions button,
.jc-file-card-actions a{
    font-size:.58rem!important;
}
.jc-folder-content-toolbar h2{
    font-size:.86rem!important;
}
.jc-small-action-button,
.jc-select-all-label{
    font-size:.61rem!important;
}
.jc-file-filter-tabs a,
.jc-file-filter-tabs button{
    font-size:.68rem!important;
}
.jc-upload-dropzone h2{
    font-size:1rem!important;
}
.jc-upload-dropzone p{
    font-size:.7rem!important;
}
.jc-manage-access-modal{
    width:min(95%,720px)!important;
}
.jc-manage-access-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border:1px solid #bfdbfe;
    border-radius:11px;
    color:#0b3d91;
    background:#eff6ff;
}
.jc-manage-access-summary strong{
    font-size:.78rem;
}
.jc-manage-access-summary span{
    font-size:.67rem;
    font-weight:800;
}
.jc-manage-access-list{
    display:grid;
    gap:9px;
    margin-top:11px;
}
.jc-access-person{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    padding:12px;
    border:1px solid #dce6f1;
    border-radius:12px;
    background:#ffffff;
}
.jc-access-person.has-viewed{
    border-color:#a7f3d0;
    background:#f0fdf4;
}
.jc-access-person.not-viewed{
    border-color:#fde68a;
    background:#fffbeb;
}
.jc-access-avatar{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#ffffff;
    background:#2563eb;
    font-size:.8rem;
    font-weight:950;
}
.jc-access-person-info{
    min-width:0;
}
.jc-access-person-info strong,
.jc-access-person-info span,
.jc-access-person-info small{
    display:block;
}
.jc-access-person-info strong{
    color:#17324f;
    font-size:.75rem;
}
.jc-access-email{
    margin-top:2px;
    color:#64748b;
    font-size:.61rem;
}
.jc-access-view-status{
    margin-top:6px;
    color:#047857;
    font-size:.65rem;
    font-weight:900;
}
.jc-access-person.not-viewed .jc-access-view-status{
    color:#b45309;
}
.jc-access-policy{
    margin-top:4px;
    color:#52677e;
    font-size:.58rem;
}
.jc-access-remarks{
    margin-top:5px;
    color:#334155;
    font-size:.58rem;
    font-style:italic;
}
.jc-revoke-access{
    padding:7px 9px;
    border:0;
    border-radius:8px;
    color:#b91c1c;
    background:#fee2e2;
    font-size:.58rem;
    font-weight:900;
    cursor:pointer;
}
@media(max-width:600px){
    .jc-access-person{
        grid-template-columns:38px minmax(0,1fr);
    }
    .jc-revoke-access{
        grid-column:1/-1;
        width:100%;
    }
    .jc-manage-access-summary{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* FINAL FOLDER TITLE + FOLDER ACCESS READABILITY */
.jc-folder-open strong{
    font-size:.92rem!important;
    line-height:1.25!important;
    color:#10243d!important;
}
.jc-folder-content-toolbar h2{
    font-size:1.08rem!important;
    line-height:1.3!important;
    color:#10243d!important;
}
.jc-folder-breadcrumb strong{
    font-size:.84rem!important;
    color:#10243d!important;
}
.jc-folder-card{
    min-height:108px!important;
}
.jc-folder-open span{
    font-size:1.65rem!important;
}

/* Folder Access popup */
#folderVisibilityModal .jc-attachment-modal{
    width:min(94%,590px)!important;
}
#folderVisibilityModal .jc-modal-head{
    padding:18px 20px!important;
}
#folderVisibilityModal .jc-modal-head h3{
    font-size:1.15rem!important;
    color:#10243d!important;
}
#folderVisibilityModal .jc-card-label{
    font-size:.68rem!important;
    color:#475569!important;
}
#folderVisibilityModal .jc-modal-body{
    gap:12px!important;
    padding:18px 20px 20px!important;
}
#folderVisibilityModal .jc-visibility-option{
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:12px!important;
    padding:16px!important;
    border:1px solid #cbd5e1!important;
    border-radius:12px!important;
    background:#ffffff!important;
}
#folderVisibilityModal .jc-visibility-option:hover{
    border-color:#2563eb!important;
    background:#eff6ff!important;
}
#folderVisibilityModal .jc-visibility-option:has(input:checked){
    border:2px solid #2563eb!important;
    background:#eff6ff!important;
    box-shadow:0 8px 20px rgba(37,99,235,.12)!important;
}
#folderVisibilityModal .jc-visibility-option input{
    width:18px!important;
    height:18px!important;
    margin-top:3px!important;
    accent-color:#2563eb!important;
}
#folderVisibilityModal .jc-visibility-option strong{
    font-size:.92rem!important;
    line-height:1.3!important;
    color:#0f172a!important;
}
#folderVisibilityModal .jc-visibility-option small{
    margin-top:6px!important;
    font-size:.74rem!important;
    line-height:1.55!important;
    color:#334155!important;
}
#folderVisibilityModal .jc-confirm-note{
    padding:12px 14px!important;
    font-size:.72rem!important;
    line-height:1.55!important;
    color:#78350f!important;
    background:#fffbeb!important;
}
#folderVisibilityModal .jc-button{
    min-height:42px!important;
    font-size:.72rem!important;
}

/* Download history in Manage Access */
.jc-access-download-status{
    display:block;
    margin-top:4px;
    color:#1d4ed8;
    font-size:.62rem;
    font-weight:850;
}

/* FINAL SHARED FILES UI */

/* =========================================================
   JoinsCloud V1 — Full Width + Bottom Dock Layout
   ========================================================= */
body.jc-bottom-dock-layout{
    min-height:100vh;
    padding-bottom:108px;
}
.jc-bottom-dock-layout .jc-app-shell,
.jc-app-shell-dock{
    min-height:100vh !important;
    display:block !important;
    grid-template-columns:none !important;
}
.jc-bottom-dock-layout .jc-sidebar{
    display:none !important;
}
.jc-app-main-dock{
    width:100% !important;
    min-width:0;
    margin:0 !important;
}
.jc-dock-topbar{
    position:sticky;
    top:0;
    z-index:150;
    width:100%;
    min-height:74px !important;
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 clamp(18px,3vw,42px) !important;
    border-bottom:1px solid rgba(147,165,190,.22);
    background:rgba(3,16,33,.88) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.jc-dock-brand{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    text-decoration:none;
}
.jc-dock-brand .jc-brand-logo-horizontal{
    width:168px;
    height:40px;
    object-fit:contain;
}
.jc-dock-page-title{
    min-width:0;
    flex:1;
    padding-left:8px;
}
.jc-dock-page-title strong{
    display:block;
    overflow:hidden;
    color:#f7fbff;
    font-size:17px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jc-dock-page-title small{
    display:block;
    margin-top:3px;
    color:#91a6c1 !important;
    font-size:11px;
}
.jc-dock-top-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.jc-top-action-button{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(160,180,205,.25);
    border-radius:13px;
    background:rgba(255,255,255,.06);
    color:#f6f9ff;
    font-size:24px;
    line-height:1;
    text-decoration:none;
    transition:.18s ease;
}
.jc-top-action-button:hover{
    border-color:rgba(54,131,255,.7);
    background:rgba(25,105,245,.18);
    transform:translateY(-1px);
}
.jc-profile-menu{
    position:relative;
}
.jc-profile-menu summary{
    list-style:none;
}
.jc-profile-menu summary::-webkit-details-marker{
    display:none;
}
.jc-profile-menu .jc-user-chip{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 9px 5px 6px;
    border:1px solid rgba(160,180,205,.22);
    border-radius:15px;
    background:rgba(255,255,255,.055);
    cursor:pointer;
    user-select:none;
}
.jc-profile-menu .jc-user-chip>span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,#176bff,#4d8fff);
    color:#fff;
    font-size:15px;
    font-weight:900;
}
.jc-profile-menu .jc-user-chip strong{
    max-width:145px;
    overflow:hidden;
    color:#fff;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jc-profile-menu .jc-user-chip small{
    color:#91a6c1;
    font-size:10px;
    text-transform:capitalize;
}
.jc-profile-menu .jc-user-chip>b{
    color:#91a6c1;
    font-size:13px;
}
.jc-profile-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:250;
    width:240px;
    overflow:hidden;
    padding:9px;
    border:1px solid rgba(157,177,204,.25);
    border-radius:18px;
    background:#07182e;
    box-shadow:0 24px 70px rgba(0,0,0,.38);
}
.jc-profile-dropdown-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    margin-bottom:7px;
    border-bottom:1px solid rgba(157,177,204,.16);
}
.jc-profile-dropdown-head>span{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#176bff;
    color:#fff;
    font-weight:900;
}
.jc-profile-dropdown-head strong,
.jc-profile-dropdown-head small{
    display:block;
}
.jc-profile-dropdown-head strong{
    color:#fff;
    font-size:13px;
}
.jc-profile-dropdown-head small{
    margin-top:2px;
    color:#91a6c1;
    font-size:10px;
}
.jc-profile-dropdown>a{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:44px;
    padding:0 12px;
    border-radius:11px;
    color:#dce8f7;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}
.jc-profile-dropdown>a:hover{
    background:rgba(255,255,255,.075);
}
.jc-profile-dropdown>a.jc-profile-logout{
    color:#ff9fa7;
}
.jc-app-content-dock,
.jc-bottom-dock-layout .jc-app-content{
    width:100%;
    max-width:none !important;
    min-height:calc(100vh - 74px);
    padding:clamp(18px,2.6vw,38px) clamp(16px,3vw,46px) 44px !important;
    margin:0 !important;
}
.jc-bottom-dock{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:220;
    display:flex;
    justify-content:center;
    padding:0 14px calc(12px + env(safe-area-inset-bottom));
    pointer-events:none;
}
.jc-bottom-dock-inner{
    width:min(720px,calc(100vw - 28px));
    min-height:78px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    gap:5px;
    padding:8px;
    border:1px solid rgba(166,185,211,.26);
    border-radius:24px;
    background:rgba(4,18,38,.92);
    box-shadow:0 22px 70px rgba(0,0,0,.42);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    pointer-events:auto;
}
.jc-dock-item{
    position:relative;
    min-width:0;
    min-height:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:7px 5px;
    border-radius:17px;
    color:#8fa5c0;
    text-align:center;
    text-decoration:none;
    transition:transform .18s ease,background .18s ease,color .18s ease;
}
.jc-dock-item:hover{
    background:rgba(255,255,255,.07);
    color:#fff;
    transform:translateY(-2px);
}
.jc-dock-item.active{
    background:linear-gradient(180deg,rgba(31,112,255,.24),rgba(31,112,255,.09));
    color:#fff;
}
.jc-dock-item.active:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:3px;
    width:26px;
    height:3px;
    border-radius:999px;
    background:#2f80ff;
    transform:translateX(-50%);
    box-shadow:0 0 16px rgba(47,128,255,.9);
}
.jc-dock-icon{
    min-height:24px;
    display:grid;
    place-items:center;
    font-size:22px;
    line-height:1;
}
.jc-dock-item strong{
    overflow:hidden;
    max-width:100%;
    font-size:11px;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jc-dock-record{
    color:#c9dcff;
}
.jc-dock-record .jc-dock-icon{
    width:35px;
    height:35px;
    min-height:35px;
    border-radius:50%;
    background:linear-gradient(135deg,#176bff,#5a96ff);
    color:#fff;
    font-size:16px;
    box-shadow:0 9px 22px rgba(23,107,255,.34);
}
.jc-dock-record.active .jc-dock-icon,
.jc-dock-record:hover .jc-dock-icon{
    transform:scale(1.06);
}
@media(max-width:760px){
    body.jc-bottom-dock-layout{
        padding-bottom:92px;
    }
    .jc-dock-topbar{
        min-height:64px !important;
        gap:10px;
        padding:0 12px !important;
    }
    .jc-dock-brand .jc-brand-logo-horizontal{
        width:126px;
        height:34px;
    }
    .jc-dock-page-title{
        display:none;
    }
    .jc-top-action-button{
        width:39px;
        height:39px;
    }
    .jc-profile-menu .jc-user-chip{
        min-height:42px;
        padding:3px;
        border:0;
        background:transparent;
    }
    .jc-profile-menu .jc-user-chip>span{
        width:38px;
        height:38px;
    }
    .jc-profile-menu .jc-user-chip>div,
    .jc-profile-menu .jc-user-chip>b{
        display:none;
    }
    .jc-profile-dropdown{
        position:fixed;
        top:70px;
        right:12px;
        width:min(260px,calc(100vw - 24px));
    }
    .jc-app-content-dock,
    .jc-bottom-dock-layout .jc-app-content{
        min-height:calc(100vh - 64px);
        padding:16px 12px 30px !important;
    }
    .jc-bottom-dock{
        padding:0 8px calc(7px + env(safe-area-inset-bottom));
    }
    .jc-bottom-dock-inner{
        width:100%;
        min-height:70px;
        padding:6px;
        border-radius:20px;
    }
    .jc-dock-item{
        min-height:56px;
        gap:4px;
        border-radius:14px;
    }
    .jc-dock-icon{
        font-size:20px;
    }
    .jc-dock-item strong{
        font-size:10px;
    }
    .jc-dock-record .jc-dock-icon{
        width:32px;
        height:32px;
        min-height:32px;
    }
}
@media(max-width:390px){
    .jc-dock-brand .jc-brand-logo-horizontal{
        width:110px;
    }
    .jc-dock-item strong{
        font-size:9px;
    }
}