@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;
    /* Centred with auto margins rather than place-items: a card taller than
       the page then scrolls inside it instead of being cut off at both ends
       — which is how the buy button once went missing on phones. */
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    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 {
    margin: auto;
    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; }

/* One price, and every paper it opens — named, so nobody reads the card as
   ₹49 for the paper in front of them. */
.epn-unlock-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 2px 0 12px;
}
.epn-unlock-price b {
    font: 800 1.9rem/1 'Inter', 'Nirmala UI', sans-serif;
    color: #f8c24c;
}
.epn-unlock-price span {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(110, 231, 168, .12);
    color: #6ee7a8;
    font: 600 .74rem/1.3 'Inter', 'Nirmala UI', sans-serif;
}
.epn-unlock-for {
    margin: 0 0 8px;
    font: 600 .78rem/1.4 'Inter', 'Nirmala UI', sans-serif;
    color: #c2ccd8;
}
.epn-unlock-papers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
}
.epn-unlock-papers li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #3a4250;
    border-radius: 999px;
    background: #1b2027;
    color: #dbe3ec;
    font: 600 .76rem/1.2 'Inter', 'Nirmala UI', sans-serif;
}
.epn-unlock-papers li i { font-size: .66rem; color: #f8c24c; }
.epn-unlock-papers li.is-here {
    border-color: #f8c24c;
    background: rgba(248, 194, 76, .12);
}
.epn-unlock-papers li em {
    font-style: normal;
    font-weight: 500;
    color: #f8c24c;
}
.epn-unlock-papers li.is-more {
    border-style: dashed;
    color: #9aa7b6;
}
.epn-unlock-free {
    display: block;
    margin-top: 10px;
    font-size: .74rem;
    color: #8a96a4;
}
/* The button follows the price, so it needs room below it before the list
   of booklets. */
.epn-unlock-card > .epn-unlock-cta,
.epn-unlock-card > .epn-unlock-manual { margin-bottom: 14px; }

/* Phones: a page is barely 500px tall. Keep the price, the button and the
   booklet chips; drop the icon and the three-line list, which only repeat
   what the chips already say. */
@media (max-width: 560px) {
    .epn-unlock { padding: 10px; }
    .epn-unlock-card { padding: 16px 12px 14px; }
    .epn-unlock-lock { display: none; }
    .epn-unlock-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
    .epn-unlock-price { margin-bottom: 10px; }
    .epn-unlock-price b { font-size: 1.6rem; }
    .epn-unlock-list { display: none; }
    .epn-unlock-papers { gap: 5px; margin-bottom: 6px; }
    .epn-unlock-papers li { padding: 4px 8px; font-size: .72rem; }
    .epn-unlock-free { margin-top: 6px; }
}

.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;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFD700, #FDB931);
    color: #111827;
    font: 700 .88rem/1 'Inter', 'Nirmala UI', sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.epn-unlock-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.epn-unlock-cta.is-busy {
    opacity: .75;
    pointer-events: none;
}

.epn-unlock-manual {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #1b2027;
    font-size: .8rem;
    line-height: 1.5;
    color: #b5c0cc;
}

/* Name and mobile, asked just before Razorpay opens. A sheet on phones, a
   centred card from tablet up; same palette as the unlock card. */
body.epn-buy-open { overflow: hidden; }
.epn-buy {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    align-items: end;
    justify-items: center;
    background: rgba(8, 10, 13, .72);
    animation: epn-fade .18s ease-out both;
}
@keyframes epn-fade { from { opacity: 0; } to { opacity: 1; } }
.epn-buy-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border: 1px solid #3a4250;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: #14171c;
    color: #dbe3ec;
    font-family: 'Inter', 'Nirmala UI', sans-serif;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
    animation: epn-sheet .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes epn-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 641px) {
    .epn-buy { align-items: center; padding: 16px; }
    .epn-buy-card { border-bottom: 1px solid #3a4250; border-radius: 16px; padding-bottom: 20px; }
}
.epn-buy-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa7b6;
    font-size: 1rem;
    cursor: pointer;
}
.epn-buy-close:hover { background: #1f242c; color: #fff; }
.epn-buy-card h3 {
    margin: 0 36px 6px 0;
    font: 700 1.12rem/1.3 'Kalam', 'Nirmala UI', cursive;
    color: #f8c24c;
}
.epn-buy-card > p {
    margin: 0 0 16px;
    font-size: .84rem;
    line-height: 1.55;
    color: #c2ccd8;
}
.epn-buy-card b { color: #fff; }
.epn-buy-field {
    display: block;
    margin-bottom: 12px;
}
.epn-buy-field > span:first-child {
    display: block;
    margin-bottom: 6px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #9aa7b6;
}
.epn-buy-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 12px;
    border: 1px solid #3a4250;
    border-radius: 10px;
    background: #0d1014;
    color: #fff;
    font: 500 1rem/1.2 'Inter', 'Nirmala UI', sans-serif;
}
.epn-buy-field input::placeholder { color: #5f6b78; }
.epn-buy-field input:focus {
    outline: none;
    border-color: #f8c24c;
    box-shadow: 0 0 0 3px rgba(248, 194, 76, .18);
}
.epn-buy-field input.is-bad { border-color: #f27474; }
.epn-buy-phone {
    display: flex;
    align-items: stretch;
}
.epn-buy-phone em {
    display: grid;
    place-items: center;
    padding: 0 12px;
    border: 1px solid #3a4250;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #1b2027;
    color: #c2ccd8;
    font: 600 .95rem/1 'Inter', sans-serif;
    font-style: normal;
}
.epn-buy-phone input { border-radius: 0 10px 10px 0; letter-spacing: .04em; }
.epn-buy-error {
    margin: -2px 0 12px;
    font-size: .8rem;
    line-height: 1.45;
    color: #f79b9b;
}
.epn-buy-go {
    width: 100%;
    padding: 14px 20px;
    font-size: .95rem;
}
.epn-buy-go.is-busy {
    opacity: .75;
    pointer-events: none;
}
.epn-buy-fine {
    display: block;
    margin-top: 12px;
    font-size: .74rem;
    line-height: 1.5;
    color: #8a96a4;
    text-align: center;
}
.epn-buy-fine i { color: #6ee7a8; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) {
    .epn-buy, .epn-buy-card { animation: none; }
}

.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%;
}