.elementor-331 .elementor-element.elementor-element-783e343{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:080px;--padding-bottom:040px;--padding-left:040px;--padding-right:040px;}.elementor-331 .elementor-element.elementor-element-783e343:not(.elementor-motion-effects-element-type-background), .elementor-331 .elementor-element.elementor-element-783e343 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(135deg, #20C997 0%, #17A2B8 100%);}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-331 .elementor-element.elementor-element-a0a1e0a{width:var( --container-widget-width, 15% );max-width:15%;background-color:#FFFFFF33;margin:-6px 016px calc(var(--kit-widget-spacing, 0px) + 3px) 16px;padding:5px 7px 5px 11px;--container-widget-width:15%;--container-widget-flex-grow:0;border-radius:20px 20px 20px 20px;}.elementor-331 .elementor-element.elementor-element-a0a1e0a .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#FFFFFF;}.elementor-331 .elementor-element.elementor-element-c854be8 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:48px;font-weight:700;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-331 .elementor-element.elementor-element-71e2fb1 p{margin-block-end:18px;}.elementor-331 .elementor-element.elementor-element-71e2fb1{color:#FFFBFB;}.elementor-331 .elementor-element.elementor-element-f86b075{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-331 .elementor-element.elementor-element-96b9238 .elementor-button{background-color:#FFFFFF00;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF80;border-radius:6px 6px 6px 6px;}.elementor-331 .elementor-element.elementor-element-96b9238{width:auto;max-width:auto;}.elementor-331 .elementor-element.elementor-element-96b9238.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-331 .elementor-element.elementor-element-f8942eb .elementor-button{background-color:#FFFFFF00;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF80;border-radius:6px 6px 6px 6px;}.elementor-331 .elementor-element.elementor-element-90b7e16 .elementor-button{background-color:#FFFFFF00;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF80;border-radius:6px 6px 6px 6px;}.elementor-331 .elementor-element.elementor-element-28201e1 .elementor-button{background-color:#FFFFFF00;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF80;border-radius:6px 6px 6px 6px;}.elementor-331 .elementor-element.elementor-element-ff3d608 .elementor-button{background-color:#FFFFFF00;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF80;border-radius:6px 6px 6px 6px;}.elementor-331 .elementor-element.elementor-element-6b51906 .elementor-button{background-color:#FFFFFF00;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF80;border-radius:6px 6px 6px 6px;}.elementor-331 .elementor-element.elementor-element-95a62b6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-331 .elementor-element.elementor-element-da3b1a9{width:var( --container-widget-width, 67.09% );max-width:67.09%;--container-widget-width:67.09%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-da3b1a9.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-5ced637{width:var( --container-widget-width, 31.33% );max-width:31.33%;--container-widget-width:31.33%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-5ced637.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-059b034{--display:flex;}.elementor-331 .elementor-element.elementor-element-059b034.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-5dace4d{--display:flex;}.elementor-331 .elementor-element.elementor-element-0c9ca4d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-331 .elementor-element.elementor-element-dfe735c{width:var( --container-widget-width, 67.946% );max-width:67.946%;--container-widget-width:67.946%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-dfe735c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-c34f470{width:var( --container-widget-width, 31.161% );max-width:31.161%;--container-widget-width:31.161%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-c34f470.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-a010ffe{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-331 .elementor-element.elementor-element-0c345e1{width:var( --container-widget-width, 68.304% );max-width:68.304%;--container-widget-width:68.304%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-0c345e1.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-8cb7e8e{width:var( --container-widget-width, 30.536% );max-width:30.536%;--container-widget-width:30.536%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-8cb7e8e.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-7fbfe61{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-331 .elementor-element.elementor-element-1918515{width:var( --container-widget-width, 68.735% );max-width:68.735%;--container-widget-width:68.735%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-1918515.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-c569a5b{width:var( --container-widget-width, 30.177% );max-width:30.177%;--container-widget-width:30.177%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-c569a5b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-ffca76b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-331 .elementor-element.elementor-element-62281da{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-331 .elementor-element.elementor-element-62281da.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-c3b340f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-331 .elementor-element.elementor-element-c3b340f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-54983de{width:var( --container-widget-width, 70.553% );max-width:70.553%;--container-widget-width:70.553%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-54983de.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-080fe9f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-331 .elementor-element.elementor-element-60f6a9b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-331 .elementor-element.elementor-element-60f6a9b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-58740be{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-331 .elementor-element.elementor-element-58740be.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-331 .elementor-element.elementor-element-a493ebd{width:var( --container-widget-width, 91.773% );max-width:91.773%;--container-widget-width:91.773%;--container-widget-flex-grow:0;}.elementor-331 .elementor-element.elementor-element-a493ebd.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-331 .elementor-element.elementor-element-059b034{--width:0.839%;}.elementor-331 .elementor-element.elementor-element-62281da{--width:68.932%;}.elementor-331 .elementor-element.elementor-element-c3b340f{--width:46.141%;}.elementor-331 .elementor-element.elementor-element-60f6a9b{--width:68.498%;}.elementor-331 .elementor-element.elementor-element-58740be{--width:36.943%;}}/* Start custom CSS for shortcode, class: .elementor-element-da3b1a9 *//* Main Applet/Component Styling */
.component-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
}

.section-header {
    padding: 20px 25px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.section-actions .action-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.section-actions .action-btn:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

.section-content {
    padding: 25px;
}

.goals-text p,
.goals-text ul,
.goals-text ol {
    margin-bottom: 1em;
    color: #666;
    line-height: 1.7;
}

.goals-text ul, .goals-text ol {
    padding-left: 20px;
}

.goals-text strong {
    color: #333;
    font-weight: 600;
}

/* Modal Popup Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-header {
    padding: 15px 25px;
    color: white;
    background: #20c997; /* Teal from template */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
}

.modal-body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-actions {
    padding: 15px 25px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #f8f9fa;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-primary {
    background: #007bff;
    color: white;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-5ced637 *//* --- FINAL Bibliography Applet Styles to Match Template --- */

/* Main component header styles */
.component-section#bibliography .section-header {
    background: #f8f9fa; /* Light grey header */
    border-bottom: 1px solid #e0e0e0;
}
.component-section#bibliography .section-header .section-title {
    color: #333;
}
.component-section#bibliography .action-btn.zotero {
    background: #DC2626; /* Zotero Red */
    color: white;
}
.component-section#bibliography .action-btn.secondary {
    background: #6c757d;
    color: white;
}

/* Sub-header for "Recent Citations" and "Add Citation" */
.zotero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.zotero-title { 
    font-weight: 600; 
    color: #333; 
    font-size: 0.9rem;
}
.action-btn-sm {
    background: #f8f9fa; 
    border: 1px solid #ddd; 
    padding: 5px 10px;
    font-size: 0.75rem; 
    border-radius: 4px; 
    cursor: pointer;
    font-weight: 500; 
    text-decoration: none; 
    color: #333;
}

/* CORRECTED STYLES FOR THE CITATION CARDS */
.recent-citations { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
.citation-item {
    background: #b9212d; /* Dark Zotero Red */
    color: white;
    padding: 12px 15px;
    border-radius: 6px;
    border-left: 4px solid #ff6b6b; /* Lighter red accent border */
}
.citation-title {
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 0.9rem;
    line-height: 1.3;
    color: white; /* Ensure text is white */
}
.citation-authors {
    font-size: 0.8rem;
    opacity: 0.9;
    color: white; /* Ensure text is white */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-dfe735c *//* --- Team Applet Styles --- */
.progress-value { font-weight: 600; color: #007bff; margin-left: 8px; }
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.team-member, .add-member {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
}
.team-member:hover { border-color: #007bff; transform: translateY(-2px); }
.member-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #20c997; /* Teal from template */
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
}
.member-name { font-weight: 500; margin-bottom: 5px; }
.member-role { font-size: 0.85rem; color: #666; }
.member-remove {
    position: absolute; top: 5px; right: 5px;
    background: #dc3545; color: white; border: none;
    border-radius: 50%; width: 20px; height: 20px;
    font-size: 0.7rem; cursor: pointer; opacity: 0; transition: opacity 0.2s ease;
}
.team-member:hover .member-remove { opacity: 1; }
.add-member {
    border: 2px dashed #007bff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 160px;
    color: #007bff;
}
.add-member:hover { background: rgba(0, 123, 255, 0.05); }
.add-member div:first-child { font-size: 2rem; }

/* Team Modal People List Styles */
.people-list { display: grid; gap: 10px; }
.person-item {
    display: flex; align-items: center; gap: 15px; padding: 12px;
    border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s ease;
}
.person-item:hover { border-color: #007bff; background: #f8f9fa; }
.person-item.selected { border-color: #28a745; background: rgba(40, 167, 69, 0.1); }
.person-avatar { width: 40px; height: 40px; border-radius: 50%; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.person-name { font-weight: 500; }
.person-title { font-size: 0.85rem; color: #666; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-c34f470 *//* --- Knowledge Resources Applet Styles --- */
.knowledge-links {
    display: grid;
    gap: 15px;
}
.knowledge-category {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.category-header {
    background: #f8f9fa;
    padding: 12px 15px;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}
.category-links {
    padding: 15px;
    display: grid;
    gap: 10px;
}
.knowledge-link {
    padding: 10px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.9rem;
}
.knowledge-link:hover {
    border-color: #20c997; /* Teal from template */
    background: rgba(32, 201, 151, 0.05);
    transform: translateX(4px);
    color: #333;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-0c345e1 *//* Styling for the Task Applet */
.task-list {
    display: flex;
    flex-direction: column;
}
.task-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    transition: background-color 0.2s ease;
}
.task-item:last-child {
    border-bottom: none;
}
.task-item:hover {
    background-color: #f8f9fa;
}
.task-item.completed .task-title {
    text-decoration: line-through;
    color: #999;
}
.task-content {
    flex-grow: 1;
}
.task-title {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 1rem;
}
.task-meta {
    font-size: 0.85rem;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}
.task-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.task-item:hover .task-actions {
    opacity: 1;
}
.action-btn-sm {
    background: #e9ecef;
    border: 1px solid #dee2e6;
    padding: 5px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}
.action-btn-sm.danger {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
.action-btn-sm:hover {
    filter: brightness(95%);
}

/* Status Badge Styling from other template */
.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}
.status-completed { background: rgba(40, 167, 69, 0.1); color: #28a745; }
.status-pending { background: rgba(255, 193, 7, 0.1); color: #ffc107; }
.status-in-progress { background: rgba(0, 123, 255, 0.1); color: #007bff; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-8cb7e8e *//* --- GitHub Applet Styles --- */
.github-repo {
    background: #24292e; /* GitHub Dark Color */
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
}
.repo-info {
    flex-grow: 1;
}
.repo-name {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.repo-description {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 15px;
    line-height: 1.5;
}
.repo-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    opacity: 0.8;
    padding-top: 15px;
    border-top: 1px solid #444d56;
}
.repo-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}
.github-btn {
    background: white;
    color: #24292e;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 20px;
    transition: all 0.2s ease;
}
.github-btn:hover {
    background: #f0f0f0;
}
/* This badge is from our tasks applet, but we can reuse it */
.status-badge.status-active {
    font-size: 0.7rem;
}
/* GitHub Settings Button */
.component-section#github .action-btn.github {
    background: #24292e; /* GitHub Dark */
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.component-section#github .action-btn.github:hover {
    background: #000;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-1918515 *//* --- ENHANCED Google Drive Applet Styles --- */
/* Note: The 'grid' properties below are correct for modern browsers, even if Elementor's editor shows a warning. */

.enhanced-drive-viewer {
    background: white;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.viewer-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 25px;
}
.viewer-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.viewer-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
}
.viewer-content {
    padding: 25px;
}
.auth-section {
    text-align: center;
}
.auth-description {
    color: #666;
    margin-bottom: 25px;
}
.auth-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #666;
}
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 15px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.view-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}
.view-toggle {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.view-toggle button {
    padding: 8px 12px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
}
.view-toggle button.active {
    background: #007bff;
    color: white;
}
.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.file-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.file-card:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.file-preview {
    height: 120px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #666;
    position: relative;
}
.file-size-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}
.file-info { padding: 15px; }
.file-name {
    font-weight: 500;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-metadata { font-size: 0.8rem; color: #666; }
.files-list {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.list-header {
    background: #f8f9fa;
    padding: 12px 15px;
    display: grid;
    grid-template-columns: 40px 1fr 120px 100px;
    gap: 15px;
    font-weight: 500;
}
.file-row {
    display: grid;
    grid-template-columns: 40px 1fr 120px 100px;
    gap: 15px;
    padding: 15px;
    border-top: 1px solid #e0e0e0;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.file-row:hover { background: #f0f6ff; }
.file-icon { font-size: 1.5rem; }
.file-name-cell { font-weight: 500; }
.file-date, .file-size { font-size: 0.85rem; color: #666; }
.error-state, .empty-state {
    text-align:center;
    padding: 40px;
    color: #666;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-c569a5b *//* --- Slack Applet Styles --- */
.slack-integration {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #4A154B; /* Slack Purple */
    border-radius: 8px;
    color: white;
}
.slack-info { flex-grow: 1; }
.slack-channel { font-weight: 600; font-size: 1.1rem; margin-bottom: 5px; }
.slack-description { font-size: 0.9rem; opacity: 0.9; }
.slack-btn {
    background: white;
    color: #4A154B;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.slack-btn:hover { transform: translateY(-1px); }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-54983de *//* --- Suggested Reading Applet Styles --- */
.reading-list { display: flex; flex-direction: column; gap: 15px; }
.reading-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reading-title { font-weight: 500; margin-bottom: 5px; color: #333; }
.reading-authors { font-size: 0.9rem; color: #666; }
.reading-actions { display: flex; align-items: center; gap: 10px; }
.reading-status { padding: 4px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; }
.status-required { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.status-recommended { background: rgba(255, 193, 7, 0.1); color: #ffc107; }
.reading-actions button {
    background: #e9ecef; border: 1px solid #dee2e6; padding: 4px 8px;
    font-size: 0.75rem; border-radius: 4px; cursor: pointer;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a493ebd *//* --- FAQs Applet Styles --- */
.faq-list { display: flex; flex-direction: column; gap: 15px; }
.faq-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.faq-question {
    padding: 20px 25px;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item.active .faq-question {
    background: #007bff;
    color: white;
}
.question-text { font-weight: 500; font-size: 1rem; }
.question-controls { display: flex; align-items: center; gap: 10px; }
.expand-icon { font-size: 1.2rem; transition: transform 0.2s ease; }
.faq-item.active .expand-icon { transform: rotate(180deg); }
.faq-actions { display: flex; gap: 8px; }
.faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
}
.answer-text { padding: 25px 0; color: #666; }/* End custom CSS */