/* =======================================================
   THE STUDY LEDGER
   Phase 1 Stylesheet
   Part 1
======================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#0b1020;

    --bg2:#161d31;

    --card:rgba(255,255,255,.06);

    --sidebar:rgba(10,16,30,.55);

    --accent:#6EA8FE;

    --accent2:#8B5CF6;

    --text:#F5F7FA;

    --muted:#9CA3AF;

    --border:rgba(255,255,255,.08);

    --shadow:0 15px 40px rgba(0,0,0,.35);

    --radius:18px;

}

html{

    scroll-behavior:smooth;

}

body{

    background:
    linear-gradient(
        135deg,
        #0b1020 0%,
        #121826 45%,
        #1b103c 100%
    );

    color:var(--text);

    font-family:'Inter',sans-serif;

    line-height:1.6;

    min-height:100vh;

}

/* =======================
   Layout
======================= */

.container{

    display:grid;

    grid-template-columns:270px 1fr;

    min-height:100vh;

}
#noteContent{

    line-height:2;

    font-size:1.05rem;

    color:var(--text);

    white-space:pre-wrap;

}

#noteTitle{

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    margin-bottom:10px;

}

#noteMeta{

    color:var(--muted);

    margin-bottom:25px;

}
/* =======================
   Sidebar
======================= */

.sidebar{

    background:rgba(12,18,32,.55);

    backdrop-filter:blur(20px);

    border-right:1px solid var(--border);

    color:white;

    padding:40px 28px;

    display:flex;

    flex-direction:column;

    position:sticky;

    top:0;

    height:100vh;

}

.logo h1{

    font-family:"Cormorant Garamond",serif;

    font-size:2.1rem;

    line-height:1.1;

    margin-bottom:14px;

}

.logo p{

    color: var(--muted);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;

    margin-bottom: 40px;
}

nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

nav a{

    color:#d9dde8;

    text-decoration:none;

    padding:13px 16px;

    border-radius:12px;

    transition:.25s;

    font-weight:500;

}

nav a:hover{

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

    transform:translateX(6px);

}

nav a.active{

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

}

/* =======================
   Main
======================= */

main{

    padding:45px;

}

/* badges*/
.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;
}

.badge.reading{

    background:#2563eb33;

    color:#60a5fa;
}

.badge.completed{

    background:#10b98133;

    color:#34d399;
}

.badge.planned{

    background:#a855f733;

    color:#c084fc;
}
/* =======================
   Hero
======================= */

.hero{

    display:flex;
    flex-direction:column;

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

    text-align:center;

    min-height:58vh;

    padding:70px 20px;

    margin-bottom:60px;
}

/* animation */

@keyframes ringGlow{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

.avatar{

    position:relative;

    width:180px;
    height:180px;

    padding:5px;          /* thickness of the ring */

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #60A5FA,
        #8B5CF6,
        #EC4899,
        #F59E0B,
        #60A5FA
    );

    background-size:300% 300%;

    animation:ringGlow 8s linear infinite;

    box-shadow:
        0 0 30px rgba(139,92,246,.35),
        0 15px 50px rgba(0,0,0,.45);

    margin-bottom:30px;
   

    user-select:none;

    -webkit-user-drag:none;
}
.avatar:hover{

    transform:scale(1.04);
}

.avatar img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #111827;
}

.hero-name{

    font-size:4rem;

    font-weight:800;

    color:var(--text);

    line-height:1.1;

    margin:0;
}

.hero-title{

    margin-top:10px;

    color:var(--accent);

    font-size:1.35rem;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:700;
}

.hero-bio{

    margin-top:25px;

    max-width:680px;

    color:var(--muted);

    font-size:1.12rem;

    line-height:1.9;
}

.hero-footer{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;

    margin-top:35px;
}

.hero-footer span{

    padding:12px 20px;

    border-radius:999px;

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

    border:1px solid var(--border);

    color:var(--text);

    font-size:.95rem;

    backdrop-filter:blur(12px);
}
/* =======================
   Statistics
======================= */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:35px;

}

.card{

    padding:18px;
    margin-bottom:30px;

}
.stat{ text-align:center; 
     }

.stat h1{

    font-size:2.2rem;

}

.stat h3{

    font-size:.95rem;

}

.stat span{

    font-size:.8rem;

}

/* =======================
   Section Header
======================= */

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.section-header h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

}

.section-header a{

    text-decoration:none;

    color:var(--accent);

    font-weight:600;

}
/* =======================================================
   THE STUDY LEDGER
   Phase 1 Stylesheet
   Part 2
======================================================= */

/* =======================
   Current Reading
======================= */

.book-preview{

    display:flex;

    gap:24px;

    align-items:center;

}


.book-info{

    width:100%;

}

.book-info h3{

    font-size:1.6rem;

    margin-bottom:6px;

    font-family:"Cormorant Garamond",serif;

}

.book-info p{

    color:var(--muted);

    margin-bottom:18px;

}

/* =======================
   Progress Bar
======================= */

.progress{
    margin:18px 0;
    height:10px;

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

    border-radius:999px;

    overflow:hidden;
}

.progress-fill{
    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--accent),
        var(--accent2)
    );
}

/* =======================
   Notes
======================= */

.note{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid var(--border);

}

.note:last-child{

    border-bottom:none;

}

.note strong{

    display:block;

    margin-bottom:6px;

}

.note p{  margin-bottom:4px;

    color:var(--text);

    font-weight:500;

}

.note small{

    color:var(--muted);

}

/* =======================
   Buttons
======================= */

button{

    border:none;

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

    color:white;

    padding:11px 22px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    font-weight:600;

}

button:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(110,168,254,.35);

}
/* =======================
   Footer
======================= */

footer{

    margin-top:50px;

    text-align:center;

    color:var(--muted);

    font-size:.9rem;

    padding:20px;

}

/* =======================
   Utility
======================= */

.card{

    background:var(--card);

    backdrop-filter:blur(18px);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:28px;

    transition:.3s ease;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(0,0,0,.45);

}

/* =======================
   Mobile Navigation
======================= */

.menu-toggle{

    display:none;

    position:fixed;

    top:20px;

    left:20px;

    z-index:2000;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:rgba(12,18,32,.8);

    backdrop-filter:blur(15px);

    color:white;

    font-size:1.5rem;

    cursor:pointer;

}

/* =======================
   Responsive
======================= */

@media(max-width:900px){

.container{

    grid-template-columns:1fr;

}

.menu-toggle{

    display:flex;

    justify-content:center;

    align-items:center;

}

.sidebar{

    position:fixed;

    left:-290px;

    top:0;

    width:270px;

    height:100vh;

    z-index:1500;

    transition:.35s ease;

    box-shadow:0 0 40px rgba(0,0,0,.5);

}

.sidebar.active{

    left:0;

}

main{

    padding:90px 24px 24px;

}

.hero{

    min-height:auto;

    padding:30px 10px;

}

.hero-name{

    font-size:2.5rem;

}

.hero-title{

    font-size:1rem;

    letter-spacing:2px;

}

.hero-bio{

    font-size:1rem;

}

.book-preview{

    flex-direction:column;

    align-items:flex-start;

}

.stats-grid{

      grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.note{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}
.logo{
    margin-top:70px;
    margin-bottom:30px;
}
.section-header{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}

}

@media(max-width:650px){

.logo h1{

    font-size:1.7rem;

}

.avatar{

    width:140px;

    height:140px;

}

.hero-name{

    font-size:2rem;

}

}
/* =======================
   Scrollbar
======================= */
::-webkit-scrollbar-track{

background:#0b1020;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
    var(--accent),
    var(--accent2)
);

}
#libraryGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.book-card{
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:28px;

    margin-bottom:28px;

    transition:.3s;
}
.book-card h2{
    color:var(--text);
    font-size:1.8rem;
    margin-bottom:8px;
}
.book-card p{
    color:var(--muted);
}

.book-card:hover{
    transform:translateY(-5px);
    border-color:rgba(110,168,254,.35);
}

.cover,
.book-cover{

    background:linear-gradient(
        135deg,
        #253861,
        #121826
    );

    border:1px solid var(--border);

}

.book-card h2{

font-family:"Cormorant Garamond",serif;

margin-bottom:8px;

}

.book-card p{

color:#6b7280;

margin-bottom:18px;

}
.note-page{

    max-width:900px;

    margin:60px auto;

    padding:40px;

}

.note-page button{

    margin-bottom:30px;

}
.note-page{

    max-width:900px;

    margin:60px auto;

    padding:20px;

}

.note-card{

    padding:50px;

}

.back-btn{

    margin-bottom:25px;

}

#noteTitle{

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    margin-bottom:10px;

    line-height:1.2;

}

#noteMeta{

    color:var(--muted);

    margin-bottom:25px;

}

#noteContent{

    line-height:2;

    font-size:1.05rem;

    white-space:pre-wrap;

    color:var(--text);

}

#noteContent h2{

    margin-top:40px;

    margin-bottom:15px;

    font-size:2rem;

    font-family:"Cormorant Garamond",serif;

}

#noteContent h3{

    margin-top:30px;

    margin-bottom:10px;

}

#noteContent p{

    margin-bottom:16px;

}

#noteContent ul{

    margin-left:25px;

    margin-bottom:18px;

}

#noteContent hr{

    margin:30px 0;

}

@media(max-width:768px){

.note-page{

    margin:25px auto;

    padding:15px;

}

.note-card{

    padding:25px;

}

#noteTitle{

    font-size:2.2rem;

}

}
.modal{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

backdrop-filter:blur(6px);

justify-content:center;

align-items:center;

z-index:9999;

}

.modal.show{

display:flex;

}

.modal-box{

width:min(500px,90%);

padding:35px;

border-radius:18px;

background:var(--bg2);

border:1px solid var(--border);

text-align:center;

}

.modal-box h2{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

margin-bottom:15px;

}

.modal-box p{

margin:15px 0;

line-height:1.7;

}

.modal-box a{

color:var(--accent);

font-weight:600;

text-decoration:none;

}

.modal-box a:hover{

text-decoration:underline;

}
#visualGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.visual-thumb{

width:100%;

height:220px;

object-fit:cover;

border-radius:18px;

margin-bottom:20px;

border:1px solid var(--border);

}

.book-card a{

display:inline-block;

margin-top:18px;

color:var(--accent);

font-weight:600;

text-decoration:none;

}
/* ==========================================
   PRIVATE NOTES
========================================== */

#passwordGate {

    position: fixed;
    inset: 0;

    z-index: 99999;

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

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #0b1020 0%,
            #121826 45%,
            #1b103c 100%
        );

}

.password-box {

    width: min(430px, 100%);

    padding: 45px 35px;

    text-align: center;

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

    backdrop-filter: blur(20px);

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

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

}

.lock-icon {

    font-size: 3rem;

    margin-bottom: 15px;

}

.password-box h1 {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 2.5rem;

    color: var(--text);

    margin-bottom: 10px;

}

.password-box p {

    color: var(--muted);

    margin-bottom: 25px;

}

#notePassword {

    width: 100%;

    padding: 14px 16px;

    border-radius: 12px;

    border: 1px solid var(--border);

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

    color: var(--text);

    font-size: 1rem;

    outline: none;

    margin-bottom: 15px;

}

#notePassword:focus {

    border-color: var(--accent);

}

#unlockNotes {

    width: 100%;

    padding: 14px;

}

#passwordError {

    color: #f87171;

    margin: 15px 0 0;

    min-height: 24px;

}


/* Small interaction and layout fixes; colors intentionally reuse the original palette. */
body { overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
nav a { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
nav a.active { box-shadow: 0 4px 18px rgba(110, 168, 254, .12); }
.avatar { transition: transform .25s ease, box-shadow .25s ease; }
.avatar:hover { transform: translateY(-2px) scale(1.025); }
.card { transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.card:hover { transform: translateY(-3px); }
.book-card { transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.book-card:hover { transform: translateY(-3px); border-color: rgba(110, 168, 254, .35); }
button { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
button:active { transform: translateY(0) scale(.985); }
button:disabled, button:disabled:hover { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.menu-toggle { border: 1px solid var(--border); }
.menu-toggle:hover { box-shadow: 0 7px 20px rgba(110, 168, 254, .18); }
.dashboard-projects > p { color: var(--muted); }

/* Book-cover placeholders need real dimensions even when no cover art is supplied. */
.book-preview .cover {
    width: 112px; min-width: 112px; height: 148px;
    display: grid; place-items: center; border-radius: 15px;
    font-size: 2.2rem;
    box-shadow: 8px 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.book-card .book-cover {
    width: 74px; height: 96px; display: grid; place-items: center;
    margin-bottom: 18px; border-radius: 12px; font-size: 1.7rem;
    box-shadow: 6px 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
@media (max-width: 900px) {
    .book-preview .cover { width: 88px; min-width: 88px; height: 116px; }
}

/* A fallback visual for entries without a screenshot or diagram image. */
.visual-card { min-width: 0; }
.visual-placeholder {
    position: relative; display: grid; place-items: center; width: 100%; height: 220px;
    overflow: hidden; border: 1px solid rgba(110,168,254,.15); border-radius: 18px;
    background: radial-gradient(circle at 50% 48%, rgba(110,168,254,.12), transparent 28%),
                linear-gradient(135deg, rgba(110,168,254,.05), rgba(139,92,246,.09));
}
.visual-placeholder::before, .visual-placeholder::after {
    content: ""; position: absolute; width: 132px; height: 132px;
    border: 1px solid rgba(110,168,254,.22); border-radius: 50%;
}
.visual-placeholder::after { width: 176px; height: 176px; border-color: rgba(139,92,246,.18); }
.visual-placeholder span { z-index: 1; color: #c8d9ff; font-size: 3rem; text-shadow: 0 0 22px rgba(110,168,254,.3); }
.visual-placeholder i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(110,168,254,.65); }
.visual-placeholder i:nth-of-type(1) { top: 27%; left: 32%; }
.visual-placeholder i:nth-of-type(2) { right: 27%; bottom: 28%; background: var(--accent2); }
.visual-placeholder i:nth-of-type(3) { top: 34%; right: 34%; }
.visual-status { display: inline-flex; margin-top: 16px; color: var(--accent2); font-size: .78rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Small, consistent feedback for controls across the site. */
button {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, background-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(110, 168, 254, .16);
    filter: brightness(1.025);
}
button:active {
    transform: translateY(0) scale(.985);
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
button:disabled,
button:disabled:hover {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}
.project-modal-backdrop:hover { filter: none; }