/* ==========================================================
   DOCKSCHOLAR RESEARCH READER
========================================================== */


/* ==========================================================
   PAGE
========================================================== */

body{
    background:#F5F7FA;
    overflow:hidden;
}


/* ==========================================================
   HEADER
========================================================== */

.reader-header{
    height:58px;

    background:#0B2D5C;
    color:white;

    padding:0 16px;
}


.reader-header-container{
    width:95%;
    max-width:1500px;

    height:100%;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
}


.reader-brand{
    display:flex;
    align-items:center;

    gap:12px;

    color:white;
    text-decoration:none;
}


.reader-brand img{
    width:36px;
    height:36px;

    object-fit:contain;

    background:white;

    border-radius:8px;

    padding:2px;
}


.reader-brand div{
    display:flex;
    flex-direction:column;
}


.reader-brand strong{
    font-size:18px;
    line-height:1.1;
}


.reader-brand span{
    font-size:11px;

    opacity:.8;

    margin-top:2px;
}


.back-directory{
    color:white;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    padding:8px 12px;

    border-radius:7px;

    transition:.2s;
}


.back-directory:hover{
    background:rgba(255,255,255,.10);
}

/* ==========================================================
   READER HEADER ACTIONS
========================================================== */

.reader-header-actions{

    display:flex;

    align-items:center;

    gap:10px;

}


.reader-header-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:36px;

    padding:0 12px;

    border:1px solid rgba(255,255,255,.30);

    border-radius:7px;

    background:rgba(255,255,255,.07);

    color:#FFFFFF;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease;

}


.reader-header-button:hover{

    background:rgba(255,255,255,.15);

    border-color:rgba(255,255,255,.50);

}


.reader-header-button:focus-visible{

    outline:2px solid rgba(255,255,255,.65);

    outline-offset:2px;

}

/* ==========================================================
   ABOUT PDF READER MODAL
========================================================== */

.about-reader-modal{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    box-sizing:border-box;

    background:rgba(8,35,65,.45);

}


.about-reader-modal[hidden]{

    display:none;

}


.about-reader-panel{

    width:100%;

    max-width:680px;

    max-height:85vh;

    display:flex;

    flex-direction:column;

    box-sizing:border-box;

    overflow:hidden;

    border:1px solid #DCE5EF;

    border-radius:12px;

    background:#FFFFFF;

    box-shadow:
        0 18px 50px rgba(15,40,70,.20);

}


/* Header */

.about-reader-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    padding:20px 22px;

    border-bottom:1px solid #E5EAF0;

    background:#F8FAFC;

}


.about-reader-header h2{

    margin:0;

    color:#0B4F8A;

    font-size:20px;

    line-height:1.25;

}


.about-reader-header p{

    margin:5px 0 0;

    color:#71859A;

    font-size:12px;

    line-height:1.4;

}


.about-reader-close{

    width:32px;

    height:32px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #CBD8E5;

    border-radius:7px;

    background:#FFFFFF;

    color:#174F82;

    font-size:20px;

    line-height:1;

    cursor:pointer;

}


.about-reader-close:hover{

    background:#EEF5FB;

}


/* Body */

.about-reader-body{

    padding:22px;

    overflow-y:auto;

    color:#4B5F73;

    font-size:13px;

    line-height:1.65;

}


.about-reader-body p{

    margin:0 0 14px;

}


.about-reader-body h3{

    margin:22px 0 8px;

    color:#0B4F8A;

    font-size:15px;

    line-height:1.3;

}


.about-reader-body ul{

    margin:0 0 16px;

    padding-left:20px;

}


.about-reader-body li{

    margin-bottom:5px;

}


/* Beta notice */

.about-reader-beta{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin-top:20px;

    padding:12px 14px;

    border-left:3px solid #D39A35;

    border-radius:5px;

    background:#FFF8EA;

    color:#80652D;

    font-size:11px;

    line-height:1.5;

}


.about-reader-beta strong{

    font-size:11px;

}


/* Footer */

.about-reader-footer{

    display:flex;

    justify-content:flex-end;

    padding:12px 22px;

    border-top:1px solid #E5EAF0;

    background:#FAFCFE;

}


.about-reader-button{

    padding:8px 14px;

    border:1px solid #CBD8E5;

    border-radius:6px;

    background:#FFFFFF;

    color:#174F82;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

}


.about-reader-button:hover{

    background:#EEF5FB;

}

/* ==========================================================
   MAIN TOOLBAR
========================================================== */

.reader-toolbar{
    height:50px;

    background:white;

    border-bottom:1px solid #DDE3EA;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 16px;

    gap:20px;
}


.toolbar-left,
.toolbar-center,
.toolbar-right{
    display:flex;

    align-items:center;

    gap:7px;
}


.toolbar-button{
    height:32px;

    min-width:36px;

    padding:0 11px;

    border:1px solid #CBD5E1;

    border-radius:7px;

    background:#FFFFFF;

    color:#334155;

    font-family:Arial, Helvetica, sans-serif;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s,
        border-color .2s,
        color .2s;
}


.toolbar-button:hover:not(:disabled){
    background:#F0F6FC;

    border-color:#B8CFE5;

    color:#0B4F8A;
}


.toolbar-button:disabled{
    opacity:.45;

    cursor:not-allowed;
}


.primary-button{
    display:flex;

    align-items:center;
    justify-content:center;

    background:#0B4F8A;

    color:white;

    border-color:#0B4F8A;
}


.primary-button:hover{
    background:#083A65;

    color:white;
}


.page-indicator{
    height:36px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:0 5px;

    color:#475569;

    font-size:14px;
}


#page-number{
    width:44px;

    height:28px;

    border:1px solid #CBD5E1;

    border-radius:6px;

    text-align:center;

    font-family:inherit;

    font-size:14px;
}


#page-number:focus{
    outline:none;

    border-color:#0B4F8A;

    box-shadow:0 0 0 3px rgba(11,79,138,.08);
}


.zoom-level{
    min-width:52px;

    text-align:center;

    color:#475569;

    font-size:14px;
}

.zoom-level-input{
    width:64px;
    height:40px;

    border:1px solid transparent;
    border-radius:8px;

    background:transparent;

    color:#334155;

    font-family:inherit;
    font-size:16px;
    font-weight:500;

    text-align:center;

    outline:none;

    cursor:text;

    transition:
        background .15s,
        border-color .15s;
}

.zoom-level-input:hover{
    background:#F8FAFC;
}

.zoom-level-input:focus{
    background:#FFFFFF;
    border-color:#0B4F8A;
    box-shadow:
        0 0 0 2px
        rgba(11,79,138,.08);
}


/* ==========================================================
   UNIFIED SIDEBAR CARD HEADERS
========================================================== */

.annotation-card-header,
.bookmark-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    width:100%;

    margin-bottom:7px;

}


.annotation-type,
.bookmark-name{

    display:flex;

    align-items:center;

    min-width:0;

    flex:1;

    color:#0B4F8A;

    font-family:inherit;

    font-size:13px;

    font-weight:700;

    line-height:1.3;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.annotation-page{

    flex-shrink:0;

    margin-left:8px;

    color:#64748B;

    font-size:12px;

    font-weight:500;

    white-space:nowrap;

}


.bookmark-card-header .annotation-page{

    flex-shrink:0;

    margin-left:8px;

    color:#64748B;

    font-size:12px;

    font-weight:500;

    white-space:nowrap;

}

/* ==========================================================
   LEFT PAGE SIDEBAR
========================================================== */

.page-sidebar{
    background:#FFFFFF;

    border-right:1px solid #DDE3EA;

    overflow-y:auto;

    padding:14px;
}


.sidebar-title{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:5px 4px 13px;

    color:#0B4F8A;

    font-size:14px;

    font-weight:700;

    border-bottom:1px solid #E5E7EB;

    margin-bottom:12px;
}


.sidebar-title span:last-child{
    color:#64748B;

    font-size:12px;

    font-weight:500;
}


.thumbnails{
    display:flex;

    flex-direction:column;

    gap:12px;
}


.thumbnail{
    background:#F8FAFC;

    border:2px solid #E2E8F0;

    border-radius:7px;

    padding:5px;

    cursor:pointer;

    transition:.2s;
}


.thumbnail:hover{
    border-color:#B8CFE5;
}


.thumbnail.active{
    border-color:#0B4F8A;

    box-shadow:
        0 0 0 2px rgba(11,79,138,.08);
}


.thumbnail canvas{
    display:block;

    width:100%;

    height:auto;

    background:white;

    border:1px solid #E5E7EB;
}


.thumbnail-number{
    display:block;

    text-align:center;

    color:#64748B;

    font-size:11px;

    margin-top:4px;
}


.empty-thumbnails{
    text-align:center;

    padding:30px 8px;

    color:#94A3B8;

    font-size:12px;
}


.empty-thumbnails .empty-icon{
    font-size:28px;

    margin-bottom:10px;
}


/* ==========================================================
   PDF AREA
========================================================== */

.pdf-container{
    position:relative;

    background:#E9EDF2;

    overflow:auto;

    padding:35px;

    scroll-behavior:smooth;
}


.pdf-pages{
    width:max-content;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:25px;

    padding-bottom:40px;
}


.pdf-page{
    position:relative;

    background:white;

    box-shadow:
        0 4px 16px rgba(0,0,0,.15);

    margin:0 auto;
}


.pdf-page canvas{
    display:block;
}


/* ==========================================================
   PDF.JS TEXT LAYER
========================================================== */

.textLayer{

    position:absolute;

    inset:0;

    overflow:hidden;

    line-height:1;

    text-align:initial;

    text-size-adjust:none;

    forced-color-adjust:none;

    transform-origin:0 0;

    z-index:2;

    --scale-factor:1;

    --total-scale-factor:1;

}


.textLayer span,
.textLayer br{

    color:transparent;

    position:absolute;

    white-space:pre;

    cursor:text;

    transform-origin:0% 0%;

}


.textLayer span{

    user-select:text;

    -webkit-user-select:text;

}


.textLayer ::selection{

    background:
        rgba(11,79,138,.25);

}

/* ==========================================================
   PDF HIGHLIGHT LAYER
========================================================== */

.highlight-layer{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

}


.pdf-highlight {
    position: absolute;
    background: var(--highlight-color);
    border-radius: 2px;
    pointer-events: none;
    cursor: pointer;
}

/* ==========================================================
   ANNOTATION NAVIGATION FOCUS
========================================================== */

.pdf-highlight.annotation-focus{

    animation:
        annotation-focus-pulse
        1.5s ease-out;

}


@keyframes annotation-focus-pulse{

    0%{

        background:
            var(--highlight-focus-color);

        box-shadow:
            0 0 0 3px
            rgba(11,79,138,.35);

    }


    50%{

        background:
            var(--highlight-focus-color);

        box-shadow:
            0 0 0 5px
            rgba(11,79,138,.18);

    }


    100%{

        background:
            var(--highlight-color);

        box-shadow:
            0 0 0 0
            rgba(11,79,138,0);

    }

}

/* ==========================================================
   RIGHT ANNOTATION SIDEBAR
========================================================== */

.annotation-sidebar{
    background:#FFFFFF;

    border-left:1px solid #DDE3EA;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}


.annotation-header{

    padding:17px 16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #E5E7EB;

}


.annotation-header h2{
    color:#0B4F8A;

    font-size:19px;

    margin:0;
}


.annotation-header p{
    color:#64748B;

    font-size:12px;

    margin-top:2px;
}


.annotation-count{

    min-width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF3FD;

    color:#0B4F8A;

    font-size:12px;

    font-weight:700;

}


.annotation-list{

    padding:12px 12px 4px;

}


.empty-annotations,
.bookmark-empty{

    color:#94A3B8;

    font-size:12px;

    line-height:1.5;

}

.empty-annotations{

    text-align:center;

    padding:42px 18px 32px;

}


.bookmark-empty{

    padding:4px;

    font-style:italic;

}


.empty-annotations .empty-icon{

    font-size:30px;

    margin-bottom:10px;

}


/* ==========================================================
   SIDEBAR CARDS
========================================================== */

.annotation-card,
.bookmark-card{

    padding:13px;

    margin-bottom:10px;

    border:1px solid #E2E8F0;

    border-radius:9px;

    background:#F8FAFC;

    cursor:pointer;

    transition:
        background .2s,
        border-color .2s,
        box-shadow .2s;

}


.annotation-card:hover,
.bookmark-card:hover{

    background:#F0F6FC;

    border-color:#B8CFE5;

    box-shadow:
        0 2px 6px rgba(15,23,42,.04);

}


.annotation-card:active,
.bookmark-card:active{

    transform:scale(.99);

}


.annotation-card:hover{
    border-color:#B8CFE5;

    background:#F0F6FC;
}


.annotation-text{
    color:#475569;

    font-size:13px;

    line-height:1.5;
}


/* ==========================================================
   EMPTY READER
========================================================== */

.empty-reader{
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    text-align:center;

    padding:30px;
}


.empty-reader-icon{
    font-size:60px;

    margin-bottom:15px;
}


.empty-reader h1{
    color:#0B4F8A;

    font-size:30px;

    margin-bottom:10px;
}


.empty-reader p{
    max-width:480px;

    color:#64748B;

    font-size:16px;

    line-height:1.6;

    margin-bottom:24px;
}


.open-pdf-large{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:12px 25px;

    border-radius:8px;

    background:#0B4F8A;

    color:white;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;
}


.open-pdf-large:hover{
    background:#083A65;

    transform:translateY(-1px);
}


/* ==========================================================
   BOTTOM ANNOTATION TOOLBAR
========================================================== */

.annotation-toolbar{
    height:58px;

    background:white;

    border-top:1px solid #DDE3EA;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    position:relative;
}


.annotation-tool{
    min-width:100px;

    height:38px;

    padding:4px 12px;

    border:1px solid #E2E8F0;

    border-radius:7px;

    background:#FFFFFF;

    color:#334155;

    font-family:inherit;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    transition:.2s;

    box-shadow:
        0 1px 2px
        rgba(15,23,42,.04);
}


.annotation-tool:hover:not(:disabled){

    background:#F5F9FD;

    border-color:#AFC7DD;

    color:#0B4F8A;

    box-shadow:
        0 2px 5px
        rgba(15,23,42,.06);

}


.annotation-tool:disabled{
    opacity:.45;

    cursor:not-allowed;
}


.tool-icon{
    font-size:15px;
}


.annotation-toolbar-divider{
    width:1px;

    height:30px;

    background:#E2E8F0;

    margin:0 8px;
}


.reader-status{
    position:absolute;

    right:16px;

    color:#8295A9;

    font-size:11px;

    max-width:240px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}



/* ==========================================================
   READER APPLICATION LAYOUT
========================================================== */

.reader-app{

    height:calc(100dvh - 72px);

    width:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}


/* ==========================================================
   READER MAIN
========================================================== */

.reader-main{

    position:relative;

    width:100%;

    max-width:none;

    margin:0;

    padding:0;

    height:calc(100vh - 202px);

    display:grid;

    grid-template-columns:
        180px
        minmax(400px,1fr)
        300px;

    overflow:hidden;

    transition:
        grid-template-columns .25s ease;

}


/* ==========================================================
   SIDEBAR TRANSITION
========================================================== */

.page-sidebar,
.annotation-sidebar{

    transition:
        width .25s ease,
        padding .25s ease,
        opacity .2s ease;

}


/* ==========================================================
   SIDEBAR TOGGLE BUTTON
========================================================== */

.sidebar-toggle{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:50;

    width:24px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid #DDE3EA;

    background:#FFFFFF;

    color:#0B4F8A;

    font-family:Arial, Helvetica, sans-serif;

    font-size:22px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);

    transition:
        background .2s,
        color .2s,
        box-shadow .2s;

}


.sidebar-toggle:hover{

    background:#F0F6FC;

    color:#083A65;

    box-shadow:
        0 3px 10px rgba(0,0,0,.12);

}


/* ==========================================================
   LEFT TOGGLE
========================================================== */

.sidebar-toggle-left{

    left:168px;

    border-radius:
        0 7px 7px 0;

}


/* ==========================================================
   RIGHT TOGGLE
========================================================== */

.sidebar-toggle-right{

    right:288px;

    border-radius:
        7px 0 0 7px;

}


/* ==========================================================
   COLLAPSE LEFT SIDEBAR
========================================================== */

.reader-main.pages-collapsed{

    grid-template-columns:
        0
        minmax(400px,1fr)
        300px;

}


.reader-main.pages-collapsed
.page-sidebar{

    width:0;

    padding:0;

    overflow:hidden;

    opacity:0;

    border:none;

}


.reader-main.pages-collapsed
.sidebar-toggle-left{

    left:0;

}


/* ==========================================================
   COLLAPSE RIGHT SIDEBAR
========================================================== */

.reader-main.annotations-collapsed{

    grid-template-columns:
        180px
        minmax(400px,1fr)
        0;

}


.reader-main.annotations-collapsed
.annotation-sidebar{

    width:0;

    padding:0;

    overflow:hidden;

    opacity:0;

    border:none;

}


.reader-main.annotations-collapsed
.sidebar-toggle-right{

    right:0;

}


/* ==========================================================
   BOTH SIDEBARS COLLAPSED
========================================================== */

.reader-main.pages-collapsed.annotations-collapsed{

    grid-template-columns:
        0
        minmax(400px,1fr)
        0;

}


/* ==========================================================
   FULLSCREEN
========================================================== */

.reader-app:fullscreen{

    width:100vw;

    height:100vh;

    background:#F5F7FA;

}


.reader-app:fullscreen .reader-main{

    height:calc(100vh - 130px);

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:1000px){

    .reader-main{

        grid-template-columns:
            150px
            minmax(300px,1fr);

    }


    .annotation-sidebar{

        display:none;

    }


    .sidebar-toggle-right{

        display:none;

    }


    /* ------------------------------------------------------
       TABLET ANNOTATION TOOLBAR
    ------------------------------------------------------ */

    .annotation-toolbar{

        height:58px;

        padding:0 10px;

        gap:5px;

        justify-content:center;

        overflow:hidden;

    }


    .annotation-tool{

        min-width:42px;

        height:36px;

        padding:4px 9px;

        gap:4px;

        font-size:12px;

        flex-shrink:0;

    }


    .annotation-tool span:last-child{

        display:none;

    }


    .tool-icon{

        font-size:16px;

    }


    .annotation-toolbar-divider{

        height:26px;

        margin:0 3px;

        flex-shrink:0;

    }
    .reader-status{
        display: none;
    }

    .mobile-annotations-button{
        display:flex !important;
        visibility:visible;
        flex-shrink:0;
    }

}


/* ==========================================================
   MOBILE READER
========================================================== */

@media(max-width:700px){

    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .reader-header{

        height:54px;

        padding:0 10px;

    }


    .reader-header-container{

        width:100%;

    }


    .reader-brand{

        gap:8px;

        min-width:0;

    }


    .reader-brand img{

        width:30px;

        height:30px;

        border-radius:6px;

        padding:2px;

    }


    .reader-brand strong{

        font-size:15px;

    }


    .reader-brand span{

        display:none;

    }


    .reader-header-actions{

        gap:5px;

    }


    .back-directory{

        font-size:11px;

        padding:6px 8px;

    }


    .reader-header-button{

        height:32px;

        padding:0 8px;

        font-size:11px;

    }


    /* ------------------------------------------------------
       MAIN TOOLBAR
    ------------------------------------------------------ */

    .reader-toolbar{

        height:48px;

        padding:0 7px;

        gap:5px;

        justify-content:flex-start;

        overflow-x:auto;

        overflow-y:hidden;

        white-space:nowrap;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }


    .reader-toolbar::-webkit-scrollbar{

        display:none;

    }


    .toolbar-left{

        flex-shrink:0;

        gap:5px;

    }


    .toolbar-center{

        display:flex;

        flex-shrink:0;

        gap:4px;

    }


    .toolbar-right{

        display:none;

    }


    .toolbar-button{

        height:32px;

        min-width:32px;

        padding:0 8px;

        font-size:12px;

        flex-shrink:0;

    }


    /* Make Open PDF slightly more prominent */

    .primary-button{

        padding:0 10px;

    }


    /* Page number */

    .page-indicator{

        height:32px;

        gap:4px;

        padding:0 2px;

        font-size:12px;

        flex-shrink:0;

    }


    #page-number{

        width:38px;

        height:27px;

        font-size:12px;

    }


    /* Zoom controls */

    .zoom-level-input{

        width:48px;

        height:32px;

        font-size:12px;

    }


    /* ------------------------------------------------------
       READER MAIN
    ------------------------------------------------------ */

    .reader-main{
        flex:1;

        min-height:0;

        height:auto;
    }


    /* ------------------------------------------------------
       PAGE SIDEBAR
    ------------------------------------------------------ */

    .page-sidebar{

        display:none;

    }


    .sidebar-title{

        padding:
            3px
            2px
            8px;

        margin-bottom:8px;

        font-size:11px;

    }


    .sidebar-title span:last-child{

        font-size:10px;

    }


    .thumbnails{

        gap:7px;

    }


    .thumbnail{

        padding:3px;

        border-radius:5px;

    }


    .thumbnail-number{

        font-size:9px;

        margin-top:2px;

    }


    .empty-thumbnails{

        padding:20px 3px;

        font-size:10px;

    }


    .empty-thumbnails .empty-icon{

        font-size:20px;

        margin-bottom:6px;

    }


    /* ------------------------------------------------------
       PDF AREA
    ------------------------------------------------------ */

    .pdf-container{

        padding:15px 8px;

        min-width:0;

    }


    .pdf-pages{

        gap:15px;

        padding-bottom:25px;

    }


    /* ------------------------------------------------------
       EMPTY READER
    ------------------------------------------------------ */

    .empty-reader{

        padding:20px 12px;

    }


    .empty-reader-icon{

        font-size:42px;

        margin-bottom:10px;

    }


    .empty-reader h1{

        font-size:21px;

        margin-bottom:7px;

    }


    .empty-reader p{

        max-width:280px;

        font-size:13px;

        line-height:1.5;

        margin-bottom:18px;

    }


    .open-pdf-large{

        padding:10px 20px;

        font-size:13px;

    }


    /* ------------------------------------------------------
       BOTTOM ANNOTATION TOOLBAR
    ------------------------------------------------------ */

    .annotation-toolbar{

        height:58px;

        padding:0 7px;

        gap:5px;

        justify-content:center;

        overflow:hidden;

    }


    .annotation-tool{

        min-width:42px;

        height:36px;

        padding:4px 8px;

        gap:4px;

        font-size:11px;

    }


    .annotation-tool span:last-child{

        display:none;

    }


    .tool-icon{

        font-size:15px;

    }


    .annotation-toolbar-divider{

        height:26px;

        margin:0 2px;

    }


    .reader-status{

        display:none;

    }


    /* ------------------------------------------------------
       SIDEBAR TOGGLE
    ------------------------------------------------------ */

    .sidebar-toggle-left{

        display:none;

    }


    .sidebar-toggle-right{

        display:none;

    }

}

/* ==========================================================
   EXTRA SMALL PHONES
========================================================== */

@media(max-width:400px){

    .reader-header{

        height:50px;

    }


    .reader-brand strong{

        font-size:14px;

    }


    .reader-brand img{

        width:28px;

        height:28px;

    }


    .back-directory{

        font-size:10px;

        padding:5px 6px;

    }


    .reader-header-button{

        font-size:0;

        width:32px;

        padding:0;

    }


    .reader-header-button::before{

        content:"ⓘ";

        font-size:15px;

    }


    .reader-main{
        flex:1;

        min-height:0;

        height:auto;
    }


    .page-sidebar{

        display:none;

    }


    .reader-toolbar{

        height:48px;

    }


    .annotation-toolbar{
        height:54px;
        padding:0 5px;
        gap:3px;
    }

    .annotation-tool{
        min-width:38px;
        width:38px;
        height:34px;
        padding:3px;
    }

    .tool-icon{
        font-size:14px;
    }

    .annotation-toolbar-divider{
        height:24px;
        margin:0 1px;
    }

}


/* ==========================================================
   ANNOTATION DIALOG
========================================================== */

.annotation-dialog-overlay{

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(11,45,92,.28);

    backdrop-filter:blur(2px);

}


.annotation-dialog-overlay[hidden]{

    display:none;

}


.annotation-dialog{

    width:420px;

    max-width:calc(100vw - 40px);

    background:#FFFFFF;

    border:1px solid #DDE3EA;

    border-radius:12px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    padding:20px;

}


.annotation-dialog-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:20px;

}


.annotation-dialog-header h3{

    margin:0;

    color:#0B4F8A;

    font-size:19px;

}


.annotation-dialog-header p{

    margin:4px 0 0;

    color:#64748B;

    font-size:12px;

}


.dialog-close{

    border:none;

    background:none;

    color:#64748B;

    font-size:24px;

    line-height:1;

    cursor:pointer;

}


.dialog-close:hover{

    color:#0B4F8A;

}


.annotation-dialog label{

    display:block;

    margin-bottom:7px;

    color:#334155;

    font-size:13px;

    font-weight:600;

}


.annotation-dialog label span{

    color:#94A3B8;

    font-weight:400;

}


#highlight-name{

    width:100%;

    box-sizing:border-box;

    height:40px;

    padding:0 11px;

    border:1px solid #CBD5E1;

    border-radius:7px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:14px;

}


#highlight-name:focus{

    outline:none;

    border-color:#0B4F8A;

    box-shadow:
        0 0 0 3px rgba(11,79,138,.08);

}


.use-selection-option{

    display:flex !important;

    align-items:center;

    gap:8px;

    margin-top:13px;

    font-weight:400 !important;

    color:#64748B !important;

}


.use-selection-option input{

    accent-color:#0B4F8A;

}


.annotation-dialog-actions{

    display:flex;

    justify-content:flex-end;

    gap:8px;

    margin-top:22px;

}


.dialog-button{

    height:38px;

    padding:0 15px;

    border-radius:7px;

    font-family:inherit;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

}


.dialog-button.secondary{

    background:#FFFFFF;

    border:1px solid #CBD5E1;

    color:#475569;

}


.dialog-button.primary{

    background:#0B4F8A;

    border:1px solid #0B4F8A;

    color:#FFFFFF;

}


.dialog-button:hover{

    opacity:.92;

}

/* ==========================================================
   ACTIVE HIGHLIGHT MODE
========================================================== */

.annotation-tool.tool-active{

    background:#EAF3FD;

    border-color:#0B4F8A;

    color:#0B4F8A;

    box-shadow:
        0 0 0 3px
        rgba(11,79,138,.08);

}
/* ==========================================================
   HIGHLIGHT MODE
========================================================== */

.pdf-container.highlight-mode .textLayer span{

    cursor:text;

}

/* ==========================================================
   ANNOTATION POPUP
========================================================== */

.annotation-popup{

    position:fixed;

    z-index:1100;

    width:330px;

    max-width:
        calc(100vw - 30px);

    background:#FFFFFF;

    border:1px solid #DDE3EA;

    border-radius:10px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    padding:15px;

}


.annotation-popup[hidden]{

    display:none;

}


.annotation-popup-header{

    cursor:grab;

    user-select:none;

    -webkit-user-select:none;

}


.annotation-popup-header:active{

    cursor:grabbing;

}


.popup-annotation-type{

    color:#0B4F8A;

    font-size:12px;

    font-weight:700;

}


.popup-annotation-page{

    color:#64748B;

    font-size:11px;

    margin-left:6px;

}


.popup-annotation-name{

    color:#334155;

    font-size:15px;

    font-weight:700;

    margin-bottom:10px;

}


.popup-comment-display{

    background:#F8FAFC;

    border-left:3px solid #0B4F8A;

    border-radius:5px;

    padding:10px;

    margin-bottom:10px;

    color:#475569;

    font-size:13px;

    line-height:1.5;

}


.popup-comment-display[hidden]{

    display:none;

}


#comment-input{

    width:100%;

    box-sizing:border-box;

    resize:vertical;

    min-height:90px;

    padding:10px;

    border:1px solid #CBD5E1;

    border-radius:7px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

    color:#334155;

}


#comment-input:focus{

    outline:none;

    border-color:#0B4F8A;

    box-shadow:
        0 0 0 3px rgba(11,79,138,.08);

}


.popup-actions{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:12px;

}


.popup-actions-right{

    display:flex;

    gap:6px;

}


.popup-button{

    height:34px;

    padding:0 11px;

    border-radius:6px;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

}


.popup-button.primary{

    background:#0B4F8A;

    border:1px solid #0B4F8A;

    color:#FFFFFF;

}


.popup-button.secondary{

    background:#FFFFFF;

    border:1px solid #CBD5E1;

    color:#475569;

}


.popup-button.danger{

    background:#FFFFFF;

    border:1px solid #E2B8B8;

    color:#A33A3A;

}


.popup-button:hover{

    opacity:.9;

}

/* ==========================================================
   ANNOTATION COMMENTS
========================================================== */

.annotation-comment-preview{

    margin-top:8px;

    padding-top:8px;

    border-top:1px solid #E2E8F0;

    color:#475569;

    font-size:12px;

    line-height:1.45;

}


.annotation-no-comment{

    margin-top:7px;

    color:#94A3B8;

    font-size:11px;

    font-style:italic;

}

/* ==========================================================
   DRAGGABLE ANNOTATION POPUP
========================================================== */

.annotation-popup-header{

    cursor:move;

    user-select:none;

    -webkit-user-select:none;

}


.annotation-popup-header .dialog-close{

    cursor:pointer;

}
/* ==========================================================
   EDIT ANNOTATION NAME
========================================================== */

.popup-name-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:10px;

}


.popup-name-row .popup-annotation-name{

    margin-bottom:0;

    min-width:0;

}


.popup-edit-name{

    flex-shrink:0;

    border:none;

    background:transparent;

    color:#0B4F8A;

    font-family:inherit;

    font-size:11px;

    font-weight:600;

    cursor:pointer;

    padding:4px 5px;

    border-radius:5px;

}


.popup-edit-name:hover{

    background:#EAF3FD;

}


.popup-name-editor{

    margin-bottom:12px;

}


.popup-name-editor[hidden]{

    display:none;

}


#annotation-name-input{

    width:100%;

    box-sizing:border-box;

    height:38px;

    padding:0 10px;

    border:1px solid #CBD5E1;

    border-radius:7px;

    color:#334155;

    background:#FFFFFF;

    font-family:inherit;

    font-size:13px;

}


#annotation-name-input:focus{

    outline:none;

    border-color:#0B4F8A;

    box-shadow:
        0 0 0 3px
        rgba(11,79,138,.08);

}


.popup-name-editor-actions{

    display:flex;

    justify-content:flex-end;

    gap:6px;

    margin-top:7px;

}

/* ==========================================================
   HIGHLIGHT COLORS
========================================================== */

.highlight-color-section{

    margin-top:18px;

}


.highlight-color-section > label{

    display:block;

    margin-bottom:8px;

    color:#334155;

    font-size:13px;

    font-weight:600;

}

.highlight-color-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}


.highlight-color-options{

    display:flex;

    align-items:center;

    gap:9px;

}


.highlight-color-option{

    position:relative;

    width:30px;

    height:30px;

    padding:0;

    border:2px solid transparent;

    border-radius:50%;

    cursor:pointer;

    transition:
        transform .15s,
        box-shadow .15s,
        border-color .15s;

}


/* Individual colors */

.highlight-color-option[data-color="yellow"]{

    background:#FFE100;

}


.highlight-color-option[data-color="green"]{

    background:#69C779;

}


.highlight-color-option[data-color="blue"]{

    background:#62A8E5;

}


.highlight-color-option[data-color="red"]{

    background:#F27A7A;

}


.highlight-color-option[data-color="purple"]{

    background:#B084D8;

}


.highlight-color-option:hover{

    transform:scale(1.08);

}


.highlight-color-option.selected{

    border-color:#0B4F8A;

    box-shadow:
        0 0 0 3px
        rgba(11,79,138,.12);

}


/* Small white check mark */

.highlight-color-option.selected::after{

    content:"✓";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#FFFFFF;

    font-size:14px;

    font-weight:700;

    text-shadow:
        0 1px 2px rgba(0,0,0,.35);

}
/* ==========================================================
   POPUP COLOR SELECTION
========================================================== */

.popup-color-section{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

}


.popup-color-label{

    color:#64748B;

    font-size:11px;

    font-weight:600;

}


.popup-color-options{

    display:flex;

    gap:6px;

}


.popup-color-option{

    width:20px;

    height:20px;

    padding:0;

    border:2px solid transparent;

    border-radius:50%;

    cursor:pointer;

    transition:.15s;

}


.popup-color-option[data-color="yellow"]{

    background:#FFE100;

}


.popup-color-option[data-color="green"]{

    background:#69C779;

}


.popup-color-option[data-color="blue"]{

    background:#62A8E5;

}


.popup-color-option[data-color="red"]{

    background:#F27A7A;

}


.popup-color-option[data-color="purple"]{

    background:#B084D8;

}


.popup-color-option:hover{

    transform:scale(1.1);

}


.popup-color-option.selected{

    border-color:#0B4F8A;

    box-shadow:
        0 0 0 2px
        rgba(11,79,138,.10);

}
/* ==========================================================
   BOOKMARK SECTION
========================================================== */

.bookmark-section{

    border-top:1px solid #E5E7EB;

    margin-top:4px;

    padding:14px 12px 20px;

}


.bookmark-section-header{

    display:flex;

    align-items:center;

    padding:0 4px 10px;

}


.bookmark-section-header > div{

    display:flex;

    align-items:center;

    gap:7px;

}


.bookmark-section-title{

    color:#0B4F8A;

    font-size:15px;

    font-weight:700;

    line-height:1.3;

}


.bookmark-section-count{

    min-width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF3FD;

    color:#0B4F8A;

    font-size:11px;

    font-weight:700;

}


/* Bookmark list */

.bookmark-list{

    padding:0;

}

/* ==========================================================
   ANNOTATION SIDEBAR CONTENT
========================================================== */

.annotation-sidebar-content{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

}


/* ==========================================================
   BOOKMARKS
========================================================== */

.bookmark-page-label{

    margin-top:10px;

    color:#64748B;

    font-size:12px;

}


.bookmark-card{

    position:relative;

}


.bookmark-card .annotation-card-header{

    margin-bottom:5px;

}


.bookmark-icon{

    margin-right:5px;

}


.bookmark-card-actions{

    display:flex;

    align-items:center;

    gap:4px;

    margin-top:9px;

}


.bookmark-action{

    border:none;

    background:transparent;

    color:#0B4F8A;

    font-family:inherit;

    font-size:11px;

    font-weight:600;

    cursor:pointer;

    padding:3px 5px;

    border-radius:5px;

}


.bookmark-action:hover{

    background:#EAF3FD;

}


.bookmark-action.delete{

    color:#A33A3A;

}


.bookmark-action.delete:hover{

    background:#FFF5F5;

}



.bookmark-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:6px;

}

.pdf-highlight{
    cursor:pointer;
}

/* ==========================================================
   MY RESEARCH LIBRARY
========================================================== */

/* ==========================================================
   MY RESEARCH LIBRARY
========================================================== */

.research-library {

    position: absolute;

    inset: 0;

    z-index: 1000;

    background: #ffffff;

    display: flex;

    flex-direction: column;

}


.research-library[hidden]{

    display:none;

}

/* ==========================================================
   LOCAL STORAGE INFO BUTTON
========================================================== */

.storage-info-button{

    height:40px;

    flex-shrink:0;

    padding:0 14px;

    border:1px solid #CBD8E5;

    border-radius:8px;

    background:#FFFFFF;

    color:#0B4F8A;

    font-family:inherit;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;

}


.storage-info-button:hover{

    background:#F0F6FC;

    border-color:#B8CFE5;

    color:#083A65;

    box-shadow:
        0 2px 5px
        rgba(11,79,138,.06);

}


.storage-info-button:active{

    transform:scale(.98);

}


/* ==========================================================
   CURRENT DOCUMENT
========================================================== */

.research-document-active{

    border-color:#0b5d9b;

    background:#f4f9fd;

}


.research-document-current{

    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:8px;

    padding:4px 9px;

    border-radius:5px;

    background:#EAF3FD;

    color:#0B5D9B;

    font-size:11px;

    font-weight:600;

}


.research-document-current::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:#0B5D9B;

}

/* ==========================================================
   STORAGE SUMMARY
========================================================== */

.research-storage-summary{

    margin-top:7px;

    color:#8295A9;

    font-size:12px;

}

/* ==========================================================
   LOCAL STORAGE NOTICE
========================================================== */

.local-storage-notice{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:
        rgba(11,45,92,.45);

    backdrop-filter:
        blur(3px);

}


.local-storage-notice[hidden]{

    display:none;

}


.local-storage-notice-content{

    width:100%;

    max-width:560px;

    padding:28px 30px;

    border-radius:12px;

    background:#FFFFFF;

    box-shadow:
        0 15px 45px
        rgba(15,40,70,.22);

}


.local-storage-notice-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:14px;

    border-radius:10px;

    background:#EAF3FD;

    font-size:22px;

}


.local-storage-notice-content h3{

    margin:0 0 10px;

    color:#0B2D5C;

    font-size:20px;

}


.local-storage-notice-content p{

    margin:0 0 11px;

    color:#53677D;

    font-size:14px;

    line-height:1.6;

}


.local-storage-notice-warning{

    padding:12px 14px;

    border-left:3px solid #D39A35;

    border-radius:5px;

    background:#FFF8EA;

    color:#66552F !important;

}


.local-storage-notice-check{

    display:flex;

    align-items:flex-start;

    gap:9px;

    margin-top:18px;

    color:#334155;

    font-size:13px;

    line-height:1.5;

    cursor:pointer;

}


.local-storage-notice-check input{

    width:16px;

    height:16px;

    margin-top:2px;

    flex-shrink:0;

}


.local-storage-notice-button{

    width:100%;

    height:40px;

    margin-top:18px;

    border:1px solid #0B4F8A;

    border-radius:7px;

    background:#0B4F8A;

    color:#FFFFFF;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

}


.local-storage-notice-button:disabled{

    opacity:.45;

    cursor:not-allowed;

}


.local-storage-notice-button:not(:disabled):hover{

    background:#083A65;

}


@media(max-width:600px){

    .local-storage-notice{

        padding:16px;

    }


    .local-storage-notice-content{

        padding:22px;

    }

}

/* ==========================================================
   RESEARCH STORAGE WARNING
========================================================== */

.research-storage-warning{

    max-width:720px;

    margin-top:8px;

    color:#80652D;

    font-size:11px;

    line-height:1.45;

}

/* ==========================================================
   STORAGE INFORMATION MODAL
========================================================== */

.storage-info-modal{

    position:fixed;

    inset:0;

    z-index:4500;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(11,45,92,.35);

}


.storage-info-modal[hidden]{

    display:none;

}


.storage-info-panel{

    width:100%;

    max-width:620px;

    max-height:80vh;

    overflow:auto;

    border-radius:11px;

    background:#FFFFFF;

    box-shadow:
        0 15px 40px
        rgba(15,40,70,.20);

}


.storage-info-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    border-bottom:1px solid #DDE3EA;

}


.storage-info-header h3{

    margin:0;

    color:#0B2D5C;

    font-size:18px;

}


.storage-info-close{

    width:32px;

    height:32px;

    border:1px solid #CBD5E1;

    border-radius:6px;

    background:#FFFFFF;

    color:#475569;

    font-size:21px;

    cursor:pointer;

}


.storage-info-body{

    padding:20px 22px;

    color:#53677D;

    font-size:13px;

    line-height:1.6;

}


.storage-info-body h4{

    margin:
        18px 0 7px;

    color:#0B4F8A;

    font-size:14px;

}


.storage-info-body p{

    margin:
        0 0 10px;

}


.storage-info-body ul{

    margin:
        6px 0 0 20px;

    padding:0;

}


.storage-info-body li{

    margin-bottom:5px;

}
/* ==========================================================
   COMPACT READER LAYOUT
========================================================== */

.reader-app{
    height:calc(100dvh - 58px);
    min-height: 0;
}


.reader-main{
    flex:1;

    min-height:0;

    height:auto;
}


.annotation-toolbar{
    height:58px;
    flex-shrink:0;
}


.reader-toolbar{
    height:50px;
    flex-shrink:0;
}

/* ==========================================================
   MY RESEARCH — COMPACT LAYOUT
========================================================== */

/* ----------------------------------------------------------
   LIBRARY CONTAINER
---------------------------------------------------------- */

.research-library{
    background:#FFFFFF;
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.research-library-header{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:10px 10px;

    min-height:88px;

    box-sizing:border-box;

    border-bottom:1px solid #E1E7EE;

    background-color: #0B4F8A;;
    

}


/* Title */

.research-library-header h2{

    margin:0;

    color: white;

    font-size:25px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:-.2px;

}


/* Subtitle */

.research-library-header p{

    margin:4px 0 0;

    color:#d3e0f2;

    font-size:13px;

    line-height:1.3;

}


/* Storage count */

.research-storage-summary{

    margin-top:2px;

    color:#d3e0f2;

    font-size:12px;

    line-height:1.3;
    font-style: italic;

}


/* Storage warning */

.research-storage-warning{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(
        -50%,
        -50%
    );

    width:max-content;

    max-width:460px;

    padding:7px 12px;

    border-left:3px solid #D39A35;

    border-radius:5px;

    background:#FFF8EA;

    color:#80652D;

    font-size:11px;

    line-height:1.4;

    text-align:center;

}

/* Close */

.library-close-button{

    width:36px;

    height:36px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #CBD8E5;

    border-radius:8px;

    background:#FFFFFF;

    color:#174F82;

    font-size:20px;

    line-height:1;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;

}


.library-close-button:hover{

    background:#deefff;

    border-color:#B8CFE5;

    color:#0B4F8A;

    transform: scale(1.05);

}


/* ----------------------------------------------------------
   TOOLBAR
---------------------------------------------------------- */

.research-library-toolbar{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    min-height:58px;

    box-sizing:border-box;

    border-bottom:1px solid #E1E7EE;

}


/* Local storage information button */

.storage-info-button{

    height:38px;

    flex-shrink:0;

    padding:0 14px;

    border:1px solid #CBD8E5;

    border-radius:7px;

    background:#FFFFFF;

    color:#0B4F8A;

    font-family:inherit;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;

}


.storage-info-button:hover{

    background:#91cdff;

    border-color:#084B7D;

    box-shadow:
        0 1px 4px
        rgba(11,79,138,.08);

}


/* Search */

#research-search{

    height:38px;

    flex:1;

    min-width:0;

    box-sizing:border-box;

    padding:0 13px;

    border:1px solid #CBD8E5;

    border-radius:7px;

    font-size:13px;

}

#research-search:hover{
    transform: scale(1.01);
    border-color: #084B7D;
}


/* Sort */

#research-sort{

    width:190px;

    min-width:160px;

    height:38px;

    box-sizing:border-box;

    padding:0 11px;

    border:1px solid #CBD8E5;

    border-radius:7px;

    background:#FFFFFF;

    color:#334155;

    font-size:13px;

}

#research-sort:hover{
    border-color: #084B7D;
}


/* ----------------------------------------------------------
   DOCUMENT LIST
---------------------------------------------------------- */

.research-library-list{

    flex:1;

    overflow-y:auto;

    padding:16px 24px 24px;

}


/* Empty state */

.research-library-empty{

    padding:50px 20px;

    text-align:center;

    color:#8AA0B8;

    font-size:13px;

    font-style:italic;

}


/* ----------------------------------------------------------
   DOCUMENT CARDS
---------------------------------------------------------- */

.research-document-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    min-height:72px;

    box-sizing:border-box;

    padding:13px 16px;

    margin-bottom:8px;

    border:1px solid #DBE4EE;

    border-radius:9px;

    background:#FFFFFF;

}


/* Currently open */

.research-document-active{

    border-color:#0B5D9B;

    background:#F4F9FD;

}


/* Main document information */

.research-document-main{

    min-width:0;

    flex:1;

}


/* Filename */

.research-document-name{

    margin-bottom:4px;

    color:#0B4F8A;

    font-size:15px;

    font-weight:600;

    line-height:1.3;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


/* Metadata */

.research-document-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:4px 12px;

    color:#8295A9;

    font-size:11px;

    line-height:1.3;

}


/* Current indicator */

.research-document-current{

    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:5px;

    padding:3px 8px;

    border-radius:5px;

    background:#EAF3FD;

    color:#0B5D9B;

    font-size:10px;

    font-weight:600;

}


/* ----------------------------------------------------------
   STATISTICS
---------------------------------------------------------- */

.research-document-stats{

    display:flex;

    align-items:center;

    gap:7px;

    flex-shrink:0;

}


.research-stat{

    display:flex;

    align-items:center;

    gap:4px;

    padding:5px 8px;

    border-radius:6px;

    background:#F5F8FB;

    color:#5C7187;

    font-size:11px;

    white-space:nowrap;

}


.research-stat strong{

    color:#0B4F8A;

    font-size:12px;

    font-weight:700;

}


/* ----------------------------------------------------------
   ACTION BUTTONS
---------------------------------------------------------- */

.research-document-actions{

    display:flex;

    align-items:center;

    gap:7px;

    flex-shrink:0;

}


.research-document-open{

    min-width:70px;

    height:34px;

    padding:0 13px;

    border:1px solid #0B5D9B;

    border-radius:7px;

    background:#0B5D9B;

    color:#FFFFFF;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

}


.research-document-delete{

    height:34px;

    padding:0 12px;

    border:1px solid #D8A5A5;

    border-radius:7px;

    background:#FFFFFF;

    color:#A33A3A;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

}


/* ----------------------------------------------------------
   HOVERS
---------------------------------------------------------- */

.research-document-card:hover{

    background:#F8FBFE;

    border-color:#B8CFE5;

    box-shadow:
        0 2px 7px
        rgba(20,60,100,.05);

}


.research-document-active:hover{

    background:#F4F9FD;

    border-color:#0B5D9B;

}


.research-document-open:hover{

    background:#084B7D;

}


.research-document-delete:hover{

    background:#FFF5F5;

    border-color:#C97B7B;

}


/* ==========================================================
   MY RESEARCH — MOBILE
========================================================== */

@media(max-width:700px){

    .research-library-header{

        display:flex;

        align-items:flex-start;

        gap:10px;

        padding:12px 12px;

        min-height:auto;

    }


    .research-library-header > div:first-child{

        min-width:0;

        flex:1;

    }


    .research-library-header h2{

        font-size:20px;

    }


    .research-library-header p{

        font-size:11px;

    }


    .research-storage-summary{

        font-size:10px;

    }


    .research-storage-warning{

        position:static;

        transform:none;

        width:auto;

        max-width:none;

        margin:0;

        padding:6px 8px;

        font-size:10px;

        line-height:1.35;

    }


    .library-close-button{

        width:32px;

        height:32px;

        font-size:19px;

    }


    /* ------------------------------------------------------
       LIBRARY TOOLBAR
    ------------------------------------------------------ */

    .research-library-toolbar{

        padding:9px 12px;

        flex-direction:column;

        align-items:stretch;

        gap:7px;

    }


    .storage-info-button{

        width:100%;

        height:36px;

    }


    #research-search{

        width:100%;

        height:36px;

    }


    #research-sort{

        width:100%;

        min-width:0;

        height:36px;

    }


    /* ------------------------------------------------------
       DOCUMENT LIST
    ------------------------------------------------------ */

    .research-library-list{

        padding:10px 12px 16px;

    }


    .research-document-card{

        align-items:stretch;

        flex-direction:column;

        gap:9px;

        padding:11px 12px;

    }


    .research-document-name{

        font-size:14px;

    }


    .research-document-meta{

        font-size:10px;

    }


    .research-document-stats{

        width:100%;

        flex-wrap:wrap;

        gap:5px;

    }


    .research-stat{

        padding:4px 7px;

        font-size:10px;

    }


    .research-document-actions{

        width:100%;

        gap:6px;

    }


    .research-document-open,
    .research-document-delete{

        flex:1;

        height:34px;

    }

}

/* ==========================================================
   REMOVE RESEARCH PAPER MODAL
========================================================== */

.remove-research-modal{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    box-sizing:border-box;

    background:
        rgba(15,23,42,.48);

    backdrop-filter:blur(2px);

}


.remove-research-modal[hidden]{

    display:none;

}


/* ----------------------------------------------------------
   DIALOG
---------------------------------------------------------- */

.remove-research-dialog{

    width:100%;

    max-width:460px;

    box-sizing:border-box;

    overflow:hidden;

    border:1px solid #DCE3EA;

    border-radius:12px;

    background:#FFFFFF;

    box-shadow:
        0 18px 45px
        rgba(15,23,42,.20);

    animation:
        remove-dialog-in
        .18s ease-out;

}


@keyframes remove-dialog-in{

    from{

        opacity:0;

        transform:
            translateY(8px)
            scale(.98);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.remove-research-dialog-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    padding:18px 20px 0;

}


.remove-research-warning-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#FFF4E5;

    color:#B26A00;

    font-size:19px;

    font-weight:700;

}


.remove-research-close{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid #D9E1E8;

    border-radius:6px;

    background:#FFFFFF;

    color:#64748B;

    font-size:20px;

    line-height:1;

    cursor:pointer;

}


.remove-research-close:hover{

    background:#F5F8FB;

    color:#334155;

}


/* ----------------------------------------------------------
   BODY
---------------------------------------------------------- */

.remove-research-dialog-body{

    padding:14px 20px 20px;

}


.remove-research-dialog-body h2{

    margin:0 0 7px;

    color:#0B4F8A;

    font-size:19px;

    font-weight:700;

    line-height:1.3;

}


.remove-research-question{

    margin:0 0 14px;

    color:#475569;

    font-size:13px;

    line-height:1.55;

}


.remove-research-filename{

    padding:10px 12px;

    border:1px solid #E2E8F0;

    border-radius:7px;

    background:#F8FAFC;

    color:#334155;

    font-size:12px;

    font-weight:600;

    line-height:1.45;

    overflow-wrap:anywhere;

}


.remove-research-warning{

    margin:13px 0 0;

    color:#7A5B27;

    font-size:11px;

    line-height:1.5;

}


/* ----------------------------------------------------------
   ACTIONS
---------------------------------------------------------- */

.remove-research-dialog-actions{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:8px;

    padding:13px 20px;

    border-top:1px solid #E5EAF0;

    background:#FAFCFE;

}


.remove-research-cancel,
.remove-research-confirm{

    height:36px;

    padding:0 14px;

    border-radius:7px;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .1s ease;

}


.remove-research-cancel{

    border:1px solid #CBD5E1;

    background:#FFFFFF;

    color:#475569;

}


.remove-research-cancel:hover{

    background:#F1F5F9;

}


.remove-research-confirm{

    border:1px solid #C94A4A;

    background:#C94A4A;

    color:#FFFFFF;

}


.remove-research-confirm:hover{

    background:#B83D3D;

    border-color:#B83D3D;

}


.remove-research-cancel:active,
.remove-research-confirm:active{

    transform:scale(.98);

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:500px){

    .remove-research-modal{

        padding:16px;

    }


    .remove-research-dialog-actions{

        display:grid;

        grid-template-columns:1fr 1fr;

    }


    .remove-research-cancel,
    .remove-research-confirm{

        width:100%;

    }

}
/* ==========================================================
   MOBILE ANNOTATIONS
========================================================== */

.mobile-annotations-button{
    display:none;
}


.mobile-annotations-panel{
    display:none;
}


/* ==========================================================
   MOBILE BREAKPOINT
========================================================== */

@media(max-width:1000px){

        .mobile-annotations-button{

            display:flex !important;

            visibility:visible;

            flex-shrink:0;

        }


    .mobile-annotations-panel{

        position:fixed;

        inset:0;

        z-index:9999;

        display:flex;

        flex-direction:column;

        background:#ffffff;
        overscroll-behavior:contain;

    }


    .mobile-annotations-panel[hidden]{
            display:none;
        }


        .mobile-annotations-header{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:16px;

        padding:
            calc(18px + env(safe-area-inset-top))
            18px
            16px;

        border-bottom:1px solid #e5e7eb;

        background:#ffffff;

    }


    .mobile-annotations-header h2{

        margin:0;

        font-size:20px;

        line-height:1.2;

        color:#1f2937;

    }


    .mobile-annotations-header p{

        margin:5px 0 0;

        font-size:13px;

        color:#6b7280;

    }


    .mobile-annotations-close{

        width:38px;

        height:38px;

        flex:none;

        border:none;

        border-radius:9px;

        background:#f3f4f6;

        color:#374151;

        font-size:25px;

        line-height:1;

        cursor:pointer;

    }


    .mobile-annotations-close:active{

        transform:scale(.96);

    }


    .mobile-annotations-content{

        flex:1;

        min-height:0;

        overflow-y:auto;

        padding:16px;

        padding-bottom:
            calc(16px + env(safe-area-inset-bottom));

        -webkit-overflow-scrolling:touch;

    }


    .mobile-annotation-section{

        margin-bottom:24px;

    }


    .mobile-annotation-section-title{

        display:flex;

        align-items:center;

        justify-content:space-between;

        margin-bottom:10px;

        font-size:13px;

        font-weight:700;

        color:#374151;

        text-transform:uppercase;

        letter-spacing:.04em;

    }


    .mobile-section-count{

        min-width:24px;

        padding:3px 7px;

        border-radius:999px;

        background:#eef4fa;

        color:#0B4F8A;

        text-align:center;

        font-size:12px;

    }


    .mobile-annotation-card,
    .mobile-bookmark-card{

        padding:14px;

        margin-bottom:9px;

        border:1px solid #e5e7eb;

        border-radius:10px;

        background:#ffffff;

        cursor:pointer;

        transition:
            background .15s ease,
            border-color .15s ease,
            transform .15s ease;

    }


    .mobile-annotation-card:active,
    .mobile-bookmark-card:active{

        background:#f8fafc;

        border-color:#cbd5e1;

        transform:scale(.99);

    }


    .mobile-annotation-card-header{

        display:flex;

        align-items:flex-start;

        justify-content:space-between;

        gap:12px;

    }


    .mobile-annotation-name{

        font-size:14px;

        font-weight:600;

        color:#1f2937;

        line-height:1.4;

    }


    .mobile-annotation-page,
    .mobile-bookmark-page{

        flex:none;

        font-size:12px;

        color:#6b7280;

        white-space:nowrap;

    }


    .mobile-annotation-comment{

        margin-top:7px;

        font-size:13px;

        line-height:1.5;

        color:#4b5563;

    }


    .mobile-no-comment{

        color:#9ca3af;

        font-style:italic;

    }


    .mobile-bookmark-card > div{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:12px;

    }


    .mobile-bookmark-name{

        font-size:14px;

        font-weight:600;

        color:#1f2937;

        line-height:1.4;

    }


    .mobile-annotation-empty{

        padding:20px 14px;

        border:1px dashed #d1d5db;

        border-radius:10px;

        text-align:center;

        color:#9ca3af;

        font-size:13px;

        background:#fafafa;

    }

}