@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');

/* ==========================================================
   1. A4 LAYOUT & PRINT OPTIMIZATION
   ========================================================== */
@page {
    size: A4 portrait;
    margin: 15mm;
}

:root {
    --nh-line-height: 28px;
    --nh-paper-bg: #121212;
    --nh-paper-print: #ffffff;
    --nh-rule-dark: #333333;
    --nh-rule-light: #e0e0e0;
    --nh-margin-line: #ff5252;
    
    /* Neon inks for screen (Dark Mode) */
    --ink-blue-dark: #64b5f6;
    --ink-red-dark: #ef5350;
    --ink-green-dark: #81c784;
    --ink-black-dark: #e0e0e0;

    /* Real inks for printing (Light Mode) - Made pure dark as requested */
    --ink-blue-print: #000000;
    --ink-red-print: #000000;
    --ink-green-print: #000000;
    --ink-black-print: #000000;
}

/* Notebook Container - Preview area */
.notebook-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 30px;
    background-color: #1e1e1e; /* background behind the paper */
}

/* The A4 Paper Sheet */
.notebook-page {
    width: 210mm;
    /* A4 is 794px. Without this clamp the sheet keeps its full width on a
       phone and, because .notebook-container centres it, hangs ~210px off
       both edges where an ancestor clips it away — the notes were literally
       unreadable. @media print re-states width: 100% either way. */
    max-width: 100%;
    min-height: 297mm;
    background-color: var(--nh-paper-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    padding: 40px 20px 80px 70px; /* 70px left for the margin area */
    box-sizing: border-box;
    font-family: 'Kalam', cursive;
    font-size: 1.25rem;
    line-height: var(--nh-line-height);
    color: var(--ink-blue-dark); /* Default pen */
    
    /* Ruled lines syncing exactly with line-height */
    /* User requested removing the background lines in screen view and adding a paper texture */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Red Margin Line (Vertical) */
.notebook-page::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 55px; /* Margin position */
    width: 2px;
    background-color: var(--nh-margin-line);
    z-index: 1;
}

/* Print Specific Rules */
@media print {
    @page { 
        margin: 12mm;
        size: A4 portrait;
        @bottom-left {
            content: "Parmar SSC • Expected Paper";
            font-family: 'Outfit', sans-serif;
            font-size: 9pt;
            color: #777;
        }
        @bottom-right {
            content: counter(page) " / " counter(pages);
            font-family: 'Outfit', sans-serif;
            font-size: 9pt;
            color: #777;
        }
    }

    /* Hide UI controls, headers, sidebars, toolbars during print */
    #app-header, #sidebar, .notes-tools, .handwritten-controls, 
    .bottom-nav, .floating-btn, button, .cx-header, #toast,
    .main-nav, nav, header, .arrow-icon, .chapter-options {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body * {
        visibility: visible;
    }

    /* Support notebook-container */
    .notebook-container {
        padding: 0 !important;
        background: transparent !important;
        display: block !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
    }
    
    .notebook-page {
        width: 100% !important;
        min-height: auto !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        background-image: none !important;
        padding-bottom: 20px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Support exam-paper-view and notes-container in #notes-view */
    #notes-view, 
    #notes-content-area,
    .notes-container, 
    .exam-paper-view,
    .note-card {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #111111 !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        visibility: visible !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .exam-header-banner {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border: 1.5px solid #cbd5e1 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom: 16px !important;
        padding: 14px !important;
    }
    .exam-header-banner h1 {
        color: #0f172a !important;
    }

    .exam-q-card, .topic-card {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background: #ffffff !important;
        color: #000000 !important;
        border: 1.5px solid #94a3b8 !important;
        box-shadow: none !important;
        margin-bottom: 18px !important;
        padding: 14px !important;
        border-radius: 8px !important;
    }

    .q-text-en {
        color: #0f172a !important;
        font-weight: 700 !important;
    }

    .q-text-hi {
        color: #1e40af !important;
        background: #f0f9ff !important;
        border-left: 3px solid #0284c7 !important;
    }

    .correct-opt-box {
        background: #f0fdf4 !important;
        border: 1.5px solid #16a34a !important;
    }
    .correct-opt-box * {
        color: #14532d !important;
    }
    .correct-badge {
        background: #16a34a !important;
        color: #ffffff !important;
        display: inline-block !important;
    }

    .incorrect-opt-box {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
    }
    .incorrect-opt-box * {
        color: #334155 !important;
    }

    .notes-box {
        background: #f8fafc !important;
        border: 1.5px solid #cbd5e1 !important;
    }
    .notes-box .exp-en, .notes-box .exp-hi {
        color: #1e293b !important;
    }
    .notes-box b {
        color: #000000 !important;
    }

    .visual-card-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Standardize inks for printing */
    .pen-blue { color: var(--ink-blue-print) !important; }
    .pen-red { color: var(--ink-red-print) !important; }
    .pen-green { color: var(--ink-green-print) !important; }
    .pen-black { color: var(--ink-black-print) !important; }

    .hw-print-footer {
        display: none !important;
    }
}

/* ==========================================================
   2. TYPOGRAPHY & INK COLORS
   ========================================================== */
.notebook-page h1, .notebook-page h2, .notebook-page h3 {
    font-family: 'Outfit', sans-serif;
    position: relative;
    z-index: 2;
    margin-top: calc(var(--nh-line-height) * 1.5);
    margin-bottom: var(--nh-line-height);
    line-height: 1.2;
}

.notebook-page h1 { font-size: 2rem; text-align: center; color: var(--ink-green-dark); } /* Changed to Green as requested */
.notebook-page h2 { font-size: 1.6rem; color: var(--ink-red-dark); }
.notebook-page h3 { font-size: 1.3rem; color: var(--ink-green-dark); }

.notebook-page p, .notebook-page ul, .notebook-page ol {
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Ink Classes */
.pen-blue { color: var(--ink-blue-dark); z-index: 2; position: relative;}
.pen-red { color: var(--ink-red-dark); z-index: 2; position: relative;}
.pen-green { color: var(--ink-green-dark); z-index: 2; position: relative;}
.pen-black { color: var(--ink-black-dark); z-index: 2; position: relative;}

/* ==========================================================
   3. HIGHLIGHTERS & STICKY NOTES
   ========================================================== */

/* Realistic Highlight Strokes */
.hl-yellow {
    background: linear-gradient(104deg, rgba(255,255,0,0) 0.9%, rgba(255,255,0,0.5) 2.4%, rgba(255,255,0,0.4) 5.8%, rgba(255,255,0,0.2) 93%, rgba(255,255,0,0) 96%);
    padding: 0px 4px;
    border-radius: 4px 8px 3px 5px;
    color: #111 !important; /* Forces dark contrast on highlight */
}

.hl-pink {
    background: linear-gradient(104deg, rgba(255,105,180,0) 0.9%, rgba(255,105,180,0.5) 2.4%, rgba(255,105,180,0.4) 5.8%, rgba(255,105,180,0.2) 93%, rgba(255,105,180,0) 96%);
    padding: 0px 4px;
    border-radius: 4px 8px 3px 5px;
    color: #111 !important;
}

/* A4 Page Breaks Avoidance */
.notebook-page p,
.notebook-page ul,
.hw-sticky,
.hw-visual,
.hw-cheat-sheet {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Sticky Note Aesthetics */
.hw-sticky {
    background-color: #feff9c;
    padding: 15px 20px;
    margin: 25px auto;
    width: 85%;
    box-shadow: 4px 6px 12px rgba(0,0,0,0.3);
    position: relative;
    color: #333;
    font-family: 'Kalam', cursive;
    z-index: 3;
    transform: rotate(-1deg);
    border-radius: 2px 2px 10px 2px;
}

/* Cello-tape */
.hw-sticky::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 100px;
    height: 30px;
    background-color: rgba(255,255,255,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    backdrop-filter: blur(3px);
    z-index: 4;
}

/* ==========================================================
   4. SMART UTILITIES & LOGIC
   ========================================================== */

/* Revision Mode Logic */
.revision-active .rev-mask {
    color: transparent !important;
    border-bottom: 2px dotted currentColor;
    background: none !important;
    text-shadow: none !important;
    user-select: none;
}

/* QR Code Footer (Screen view hiding) */
.hw-print-footer {
    display: none; /* Only visible in print via fixed positioning */
}

/* Also show a clean screen-only footer */
.hw-screen-footer {
    text-align: center;
    padding: 20px;
    font-family: 'Outfit', sans-serif;
    color: #666;
    margin-top: 20px;
}

/* Floating Controls */
.handwritten-controls {
    display: flex;
    gap: 15px;
    background: #222;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    z-index: 1000;
}

.hw-btn {
    background: transparent;
    border: 1px solid #555;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hw-btn:hover { background: #333; }
.hw-btn.primary { background: #03dac6; color: #000; border: none; }
.hw-btn.primary:hover { background: #01bca9; }
.hw-btn.active { background: #ffca28; color: #000; border: none; }

/* ==========================================================
   4b. NARROW-SCREEN LAYOUT
   Scoped to `screen` on purpose: printing reports the A4 page
   box (~794px) as the viewport, which falls inside these
   ranges, so an unscoped query would shrink the real printout.
   ========================================================== */

/* The sheet itself is 210mm = 794px, and .notebook-container adds 20px of
   padding each side, so anything under ~840px could not hold it. Below that
   the sheet has to be fluid. */
@media screen and (max-width: 860px) {
    .notebook-container {
        padding: 12px 0;
        gap: 16px;
    }

    .notebook-page {
        /* A4 height on a phone is three screens of empty paper. */
        min-height: 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }

    /* Authored note content carries hard-coded inline widths and long
       unbroken formula strings; without these the sheet is fluid but its
       own children push the overflow straight back out. */
    .hw-body { overflow-wrap: break-word; }
    .hw-body img,
    .hw-body svg { max-width: 100%; height: auto; }
    .hw-body table,
    .hw-body pre { display: block; max-width: 100%; overflow-x: auto; }

    /* Three controls in one nowrap row overflowed the pill bar. */
    .handwritten-controls {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 0;
    }
}

/* Phones only. A 70px left gutter and 20px type eat a 360px sheet alive. */
@media screen and (max-width: 600px) {
    .notebook-page {
        padding: 24px 16px 48px 34px; /* left still clears the margin rule */
        font-size: 1.05rem;
        --nh-line-height: 24px;
    }

    .notebook-page::before { left: 22px; }

    .notebook-page h1 { font-size: 1.35rem; }
    .notebook-page h2 { font-size: 1.15rem; }
    .notebook-page h3 { font-size: 1.02rem; }

    .handwritten-controls {
        gap: 8px;
        padding: 10px 12px;
        border-radius: 18px;
    }

    .hw-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    /* 85% of a 360px sheet leaves a sticky note too narrow to read. */
    .hw-sticky {
        width: auto;
        margin: 20px 0;
        padding: 12px 14px;
    }

    .hw-visual { height: 220px; }
}

/* ==========================================================
   4c. GK EXPECTED PAPER - HANDWRITTEN NOTES READER
   Parmar Sir's 12-page booklet, shown a page at a time with
   the printable PDF one tap away. English and Hindi are the
   same booklet, so one set of styles serves both.
   ========================================================== */
.epn {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 10px 40px;
}

.epn-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #14171c;
    border: 1px solid #2c333d;
    border-radius: 12px;
}

.epn-title b {
    display: block;
    font: 700 1.02rem/1.2 'Kalam', 'Nirmala UI', cursive;
    color: #f8c24c;
}
.epn-title span {
    display: block;
    margin-top: 2px;
    font-size: .76rem;
    color: #9aa7b6;
    letter-spacing: .02em;
}

.epn-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.epn-langs {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: #1d222a;
    border: 1px solid #2c333d;
    border-radius: 9px;
}
.epn-lang {
    padding: 5px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #c2ccd8;
    font: 600 .82rem/1 'Inter', 'Nirmala UI', sans-serif;
    cursor: pointer;
}
.epn-lang.active { background: #f8c24c; color: #14171c; }

.epn-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 9px;
    border: 1px solid #2c333d;
    background: #1d222a;
    color: #e6ecf3;
    font: 600 .82rem/1 'Inter', 'Nirmala UI', sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.epn-btn.primary {
    background: linear-gradient(135deg, #FFD700, #FDB931);
    border-color: transparent;
    color: #111827;
}

/* ---- the pages ---- */
.epn-pages { display: grid; gap: 16px; }

.epn-page {
    position: relative;
    margin: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    cursor: zoom-in;
}
.epn-page img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}
/* Before a page has its src it is still an empty box, so it holds an A4 slot
   and the reader does not jump as pages stream in. Once loaded the image's own
   ratio takes over - forcing A4 on a real page would crop it. */
.epn-page img[data-src] { aspect-ratio: 1 / 1.414; }
.epn-page figcaption {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(17, 24, 39, .72);
    color: #fff;
    font: 600 .72rem/1.5 'Inter', sans-serif;
}

/* ---- the paywall ---- */
/* A locked page is already a blurred, downscaled file (see paywall.py); the
   only thing done here is stretch it back to page width and dim it. No CSS
   filter is involved, because a filter would mean the real page had been
   downloaded in the first place. */
.epn-page.is-locked {
    cursor: default;
    background: #f3f4f6;
}
.epn-page.is-locked img {
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
    object-position: top;
    /* The file is already blurred past reading; it is left bright on purpose
       so the page still reads as "there is a full page of notes here". */
    opacity: .92;
}
.epn-page.is-locked figcaption { opacity: .5; }


.epn-free-tag { color: #6ee7a8; font-style: normal; font-weight: 600; }
.epn-paid-tag { color: #f8c24c; font-style: normal; font-weight: 600; }

.epn-btn.is-locked { filter: grayscale(.35); }

/* The card that appears on the first locked page. */
.epn-unlock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    /* Dark enough behind the card to read it, clear enough at the edges that
       the blurred page still shows through. */
    background: radial-gradient(ellipse at center,
        rgba(13, 16, 20, .86) 0%,
        rgba(13, 16, 20, .78) 34%,
        rgba(13, 16, 20, .42) 72%,
        rgba(13, 16, 20, .28) 100%);
}
.epn-unlock-card {
    width: min(100%, 380px);
    padding: 22px 20px;
    border-radius: 16px;
    border: 1px solid #3a4250;
    background: #14171c;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    opacity: 0;
}
.epn-unlock-card.is-visible {
    animation: epn-rise .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes epn-rise {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.epn-unlock-lock {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD700, #FDB931);
    color: #14171c;
    font-size: 1.15rem;
    animation: epn-pulse 2.4s ease-in-out infinite;
}
@keyframes epn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 194, 76, .45); }
    50%      { box-shadow: 0 0 0 14px rgba(248, 194, 76, 0); }
}

.epn-unlock-card h3 {
    margin: 0 0 6px;
    font: 700 1.12rem/1.3 'Kalam', 'Nirmala UI', cursive;
    color: #f8c24c;
}
.epn-unlock-card > p {
    margin: 0 0 12px;
    font-size: .84rem;
    line-height: 1.55;
    color: #c2ccd8;
}
.epn-unlock-card b { color: #fff; }

.epn-unlock-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    text-align: left;
}
.epn-unlock-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 6px;
    font-size: .8rem;
    line-height: 1.45;
    color: #dbe3ec;
}
.epn-unlock-list i { color: #6ee7a8; margin-top: 3px; font-size: .72rem; }

.epn-unlock-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFD700, #FDB931);
    color: #111827;
    font: 700 .88rem/1 'Inter', 'Nirmala UI', sans-serif;
    text-decoration: none;
}
.epn-unlock-cta.is-busy {
    opacity: .75;
    pointer-events: none;
}

.epn-unlock-manual {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: #9aa7b6;
}

.epn-loading {
    padding: 40px 0;
    text-align: center;
    color: #9aa7b6;
    font-size: .86rem;
}

/* A page that will not load says so rather than leaving a white slab. */
.epn-page.is-missing {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.414;
    background: #171b21;
    cursor: default;
}
.epn-page.is-missing img { display: none; }
.epn-page.is-missing::after {
    content: "This page could not load";
    font: 600 .82rem/1.4 'Inter', 'Nirmala UI', sans-serif;
    color: #7f8c9b;
}

/* Tapped open: break out of the column and fill the screen width. */
.epn-page.is-zoomed {
    position: fixed;
    inset: 0;
    z-index: 60;
    border-radius: 0;
    overflow: auto;
    background: #0d1014;
    cursor: zoom-out;
    -webkit-overflow-scrolling: touch;
}
.epn-page.is-zoomed img {
    width: auto;
    min-width: 100%;
    max-width: none;
}

@media (max-width: 640px) {
    .epn { padding: 0 6px 30px; }
    .epn-bar { padding: 8px 10px; }
    .epn-actions { width: 100%; justify-content: space-between; }
}

/* The screen reader is for reading; printing is what the PDF is for, so the
   browser's own print of this page is suppressed rather than half-working. */
@media print {
    .epn-bar { display: none !important; }
    .epn-page.is-locked, .epn-unlock { display: none !important; }
    .epn-pages { gap: 0; }
    .epn-page { box-shadow: none; border-radius: 0; break-after: page; }
    .epn-page figcaption { display: none; }
}

/* ==========================================================
   5. SMART BOARD & WHITEBOARD STYLES
   ========================================================== */
.self-note-board-toolbar {
    display: flex;
    gap: 4px 6px;
    padding: 4px 6px;
    background: #1c1c1d;
    border: 1px solid #3c4043;
    border-radius: 6px;
    margin-bottom: 6px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    user-select: none;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sb-btn {
    background: #2d2d2d;
    border: 1px solid #444;
    color: #ccc;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.15s;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
}

.sb-btn:hover {
    background: #3c3c3c;
    color: #fff;
}

.sb-btn.active {
    background: #8ab4f8 !important;
    color: #000 !important;
    border-color: #8ab4f8 !important;
}

.color-palette {
    display: flex;
    gap: 4px;
    align-items: center;
    background: #111;
    padding: 2px 4px;
    border-radius: 12px;
    border: 1px solid #3c4043;
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    border: 1.5px solid transparent;
    box-sizing: border-box;
    transition: 0.1s;
}

.color-dot:hover {
    transform: scale(1.2);
}

.color-dot.active {
    border-color: #8ab4f8 !important;
    transform: scale(1.3);
    box-shadow: 0 0 5px rgba(138, 180, 248, 0.8);
}

#sb-custom-color {
    width: 14px;
    height: 14px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}

#sb-brush-size, #sb-grid-style {
    background: #2d2d2d;
    border: 1px solid #444;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    outline: none;
    height: 24px;
}

/* Background Grids for Self Note Drawing Canvas */
.self-note-pen-canvas {
    border-radius: 6px;
    border: 1px solid #3c4043;
    cursor: crosshair;
    transition: background 0.2s;
    background-color: #1e1e1e;
}

.self-note-pen-canvas.bg-plain {
    background-color: #1e1e1e;
    background-image: none;
}

.self-note-pen-canvas.bg-notebook {
    background-color: #1e1e1e;
    background-image: repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 24px);
    background-position: 0 5px;
}

.self-note-pen-canvas.bg-graph {
    background-color: #1e1e1e;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
}

.self-note-pen-canvas.bg-chalkboard {
    background-color: #0d2c1d;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 8%, transparent 8%),
                      radial-gradient(rgba(255, 255, 255, 0.05) 8%, transparent 8%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* Shapes dropdown support */
.sb-dropdown {
    position: relative;
    display: inline-block;
}

.sb-dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Opens downwards! */
    left: 0;
    background-color: #252526;
    min-width: 220px; /* Wider for shapes grid */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    border: 1px solid #444;
    border-radius: 6px;
    z-index: 100;
    margin-top: 5px;
    padding: 10px;
}

.sb-shapes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Grid of 4 columns for shape icons */
    gap: 8px;
}

.sb-shapes-grid button {
    color: #ccc;
    background: #2d2d2d;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 2px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    width: 100%;
}

.sb-shapes-grid button:hover {
    background-color: #3c3c3c;
    color: #fff;
    transform: translateY(-1px);
}

.sb-shapes-grid button.active {
    background-color: #8ab4f8 !important;
    color: #000 !important;
    border-color: #8ab4f8 !important;
}

/* Category Headers for shapes dropdown */
.sb-shapes-section-title {
    grid-column: span 4;
    font-size: 0.7rem;
    color: #8ab4f8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #3c4043;
    padding-bottom: 2px;
    font-weight: bold;
    text-align: left;
}
.sb-shapes-section-title:first-child {
    margin-top: 0;
}

/* Custom Cursors on Canvas */
.self-note-pen-canvas.cursor-pen {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E") 0 16, crosshair;
}

.self-note-pen-canvas.cursor-highlighter {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238ab4f8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2l10 10L17 19l-10-10L14 2z'/%3E%3Cpath d='M6 14l-4 8 8-4-4-4z'/%3E%3C/svg%3E") 2 16, crosshair;
}

.self-note-pen-canvas.cursor-eraser {
    cursor: none !important; /* Hide native cursor so our circle outline shows up */
}

/* Content Summary Panel & Grid Styles */
.self-note-content-summary-panel {
    background-color: #1e1e1e;
    border: 1px solid #3c4043;
    border-radius: 8px;
    padding: 16px;
    min-height: 280px;
    max-height: 320px;
    overflow-y: auto;
    width: 100%;
    margin-bottom: 8px;
}

.self-note-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

.self-note-summary-card {
    position: relative;
    background: #2d2e30;
    border: 1px solid #444;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    transition: transform 0.2s, border-color 0.2s;
}

.self-note-summary-card:hover {
    transform: translateY(-2px);
    border-color: #8ab4f8;
}

.self-note-summary-thumb {
    width: 100%;
    height: 75px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
    background: #111;
}

.self-note-summary-label {
    font-size: 0.7rem;
    color: #ccc;
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}