:root{
    --bg:#f4f4f4;
    --text:#222222;
    --muted:#666666;
    --card-bg:#ffffff;
    --border:#dddddd;
    --accent:#2563eb;
    --accent-dark:#1d4ed8;
    --accent-soft:#dbeafe;
    --danger:#dc2626;
    --success:#16a34a;
}

body.dark{
    --bg:#15181f;
    --text:#eaeaea;
    --muted:#a3a3a3;
    --card-bg:#1e2230;
    --border:#333748;
    --accent:#5b8dff;
    --accent-dark:#4570e0;
    --accent-soft:#26314f;
    --danger:#f87171;
    --success:#4ade80;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,sans-serif;
}

body{
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    transition:background .2s ease, color .2s ease;
}

.container{
    width:90%;
    max-width:1000px;
    margin:auto;
}

header{
    background:var(--card-bg);
    border-bottom:1px solid var(--border);
    padding:20px 0;
}

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

header h2{
    color:var(--accent);
}

nav{
    display:flex;
    align-items:center;
    gap:20px;
}

nav a{
    text-decoration:none;
    color:var(--text);
}

nav a:hover{
    color:var(--accent);
}

.theme-toggle{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    padding:6px 10px;
    border-radius:6px;
    font-size:15px;
    line-height:1;
}

.theme-toggle:hover{
    background:var(--accent-soft);
}



.hero{
    text-align:center;
    padding:80px 20px;
}

.hero h1{
    font-size:40px;
    margin-bottom:20px;
}

.hero p{
    color:var(--muted);
    font-size:18px;
    max-width:600px;
    margin:0 auto;
}


section{
    margin:40px auto;
}

section h2{
    margin-bottom:12px;
}

.section-hint,
.upload-text{
    color:var(--muted);
    margin-bottom:16px;
}

.upload-box{
    background:var(--card-bg);
    padding:30px;
    border:1px solid var(--border);
    border-radius:8px;
    text-align:center;
}

input[type="file"]{
    margin-bottom:20px;
}

/* Buttons */

button{
    background:var(--accent);
    color:white;
    border:none;
    padding:12px 22px;
    border-radius:6px;
    cursor:pointer;
    font-size:15px;
}

button:hover{
    background:var(--accent-dark);
}

button:disabled{
    background:#999999;
    cursor:not-allowed;
}

.secondary-btn{
    background:transparent;
    color:var(--accent);
    border:1px solid var(--accent);
}

.secondary-btn:hover{
    background:var(--accent-soft);
    color:var(--accent);
}



.preview-card,
.summary-card,
.mindmap-card{

    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:25px;
    margin-top:20px;

}

#pdfFrame{
    width:100%;
    height:520px;
    border:1px solid var(--border);
    border-radius:6px;
    margin-bottom:15px;
}

.summary-card h3,
.summary-card h4{
    margin-top:20px;
    margin-bottom:10px;
}

.summary-card h3:first-child,
.summary-card h4:first-child{
    margin-top:0;
}

.summary-card li{
    margin-left:20px;
    margin-bottom:8px;
}

.mode-row{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:16px;
}

.mode-label{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    color:var(--text);
}


.keyword{
    display:inline-block;
    background:var(--accent-soft);
    color:var(--accent-dark);
    padding:6px 12px;
    margin:5px 5px 5px 0;
    border-radius:5px;
    font-size:14px;
}



/* Section-wise summary */

.section-list{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.section-item{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:18px 20px;
}

.section-item h4{
    margin-bottom:8px;
    color:var(--accent-dark);
}

.empty-hint{
    color:var(--muted);
    margin-top:16px;
}



/* Flashcards */

.flashcard-wrap{
    margin-top:20px;
    perspective:1200px;
}

.flashcard{
    height:220px;
}

.flashcard-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform .5s;
    transform-style:preserve-3d;
}

.flashcard-inner.flipped{
    transform:rotateY(180deg);
}

.flashcard-face{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:10px;
}

.flashcard-back{
    transform:rotateY(180deg);
    background:var(--accent-soft);
}

.flashcard-label{
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--muted);
}

.flashcard-face p{
    font-size:18px;
}

.flash-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.flash-counter{
    text-align:center;
    color:var(--muted);
    margin-top:10px;
    font-size:14px;
}



/* Quiz */

.quiz-list{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.quiz-item{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:20px;
}

.quiz-item h4{
    margin-bottom:14px;
}

.quiz-options{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.quiz-option{
    display:block;
    width:100%;
    text-align:left;
    background:var(--bg);
    color:var(--text);
    border:1px solid var(--border);
    padding:10px 14px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

.quiz-option:hover{
    background:var(--accent-soft);
}

.quiz-option.correct{
    background:var(--success);
    color:#ffffff;
    border-color:var(--success);
}

.quiz-option.wrong{
    background:var(--danger);
    color:#ffffff;
    border-color:var(--danger);
}

.quiz-option:disabled{
    cursor:default;
}

.quiz-explanation{
    margin-top:10px;
    color:var(--muted);
    font-size:14px;
}

.quiz-score{
    margin-top:20px;
    font-weight:600;
    text-align:center;
}



/* Mind map */

.mindmap-tree{
    list-style:none;
}

.mindmap-tree ul{
    list-style:none;
    margin-left:24px;
    padding-left:16px;
    border-left:1px dashed var(--border);
}

.mindmap-tree li{
    margin:10px 0;
}

.mindmap-node{
    display:inline-block;
    background:var(--accent-soft);
    color:var(--accent-dark);
    padding:6px 14px;
    border-radius:6px;
    font-size:14px;
}

.mindmap-tree > li > .mindmap-node{
    background:var(--accent);
    color:#ffffff;
    font-weight:600;
}



/* Chat */

.chat-box{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:20px;
    margin-top:10px;
}

.chat-messages{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:360px;
    overflow-y:auto;
    margin-bottom:16px;
    padding-right:4px;
}

.chat-msg{
    padding:10px 14px;
    border-radius:8px;
    max-width:80%;
    font-size:14px;
}

.chat-msg-bot{
    background:var(--bg);
    border:1px solid var(--border);
    align-self:flex-start;
}

.chat-msg-user{
    background:var(--accent);
    color:#ffffff;
    align-self:flex-end;
}

.chat-input-row{
    display:flex;
    gap:10px;
}

.chat-input-row input{
    flex:1;
    padding:12px 14px;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
}



/* Loading overlay */

#loading{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    align-items:center;
    justify-content:center;
    z-index:999;
}

#loading.visible{
    display:flex;
}

.loading-box{
    background:var(--card-bg);
    color:var(--text);
    padding:30px 40px;
    border-radius:10px;
    text-align:center;
}

.spinner{
    width:32px;
    height:32px;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    margin:0 auto 14px;
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}



footer{
    background:var(--card-bg);
    border-top:1px solid var(--border);
    text-align:center;
    padding:25px;
    margin-top:50px;
}

footer h3{
    color:var(--accent);
    margin-bottom:10px;
}

footer p{
    color:var(--muted);
}



@media(max-width:768px){

    .header-inner{
        flex-direction:column;
        gap:15px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:12px 15px;
    }

    .hero h1{
        font-size:30px;
    }

    .chat-msg{
        max-width:95%;
    }

}