/* ============================================================
   GLOBAL
   ============================================================ */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: #f7f8fb;

    color: #172033;

    min-height: 100vh;
}


/* ============================================================
   APP LAYOUT
   ============================================================ */

.app {
    min-height: 100vh;

    display: flex;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f9fc 55%,
            #f3f5fa 100%
        );
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main {
    flex: 1;

    min-width: 0;

    padding: 34px 42px 50px;

    overflow-y: auto;

    order: 1;
}


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

.top-header {
    display: flex;

    

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 5px;
}


.header-left {
    display: flex;

    align-items: center;

    gap: 17px;

    min-width: 0;
}


.brand-mark {
    width: 54px;

    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ff2d2d,
            #ff5757
        );

    color: white;

    font-size: 21px;

    box-shadow:
        0 10px 25px rgba(255, 45, 45, 0.22);
}


.page-label {
    color: #8a94a6;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

    margin-bottom: 3px;
}


.header-left h1 {
    margin: 0;

    font-size: 30px;

    line-height: 1.15;

    letter-spacing: -0.7px;

    color: #111827;
}


.welcome-text {
    margin: 6px 0 0;

    color: #7b8495;

    font-size: 14px;
}


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

.header-right {
    display: none;
}


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

.toolbar {
    display: flex;


    

    align-items: center;

    gap: 14px;
    
    

    margin-bottom: 25px;
}


.search-wrapper {
    position: relative;

    flex: 1;

    min-width: 200px;
}


.search-icon {
    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 15px;

    opacity: 0.55;

    pointer-events: none;
}


.search-wrapper input {
    width: 100%;

    height: 48px;

    padding: 0 17px 0 44px;

    border: 1px solid #040e1f;

    border-radius: 13px;

    background: #ffffff;

    color: #172033;

    font-size: 14px;

    outline: none;

    box-shadow:
        0 3px 12px rgba(17, 24, 39, 0.035);

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}


.search-wrapper input::placeholder {
    color: #a1a8b5;
}


.search-wrapper input:focus {
    border-color: #aab5ff;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.08);
}


/* ============================================================
   CATEGORY FILTER
   ============================================================ */

.filter-wrapper {
    position: relative;
    
    width: 510px;
}


.filter-icon {
    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 14px;

    opacity: 0.6;

    pointer-events: none;
}


#categoryFilter {
    width: 100%;

    height: 48px;

    padding: 0 38px 0 40px;

    border: 1px solid #040e1f;

    /* border: 1px solid #e2e6ed; */

    border-radius: 13px;

    background: #ffffff;

    color: #364152;

    font-size: 14px;

    font-weight: 600;

    outline: none;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(17, 24, 39, 0.035);

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}



#categoryFilter {
    width: 100%;
    height: 48px;

    padding: 0 55px 0 40px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


#categoryFilter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 0 55px 0 40px;
}



/* .filter-wrapper::after {
    content: "V";

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: #364152;

    font-size: 16px;

    pointer-events: none;
} */



.filter-wrapper::after {
    content: "";

    position: absolute;

    right: 22px;

    top: 50%;

    width: 8px;
    height: 8px;

    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;

    transform: translateY(-70%) rotate(45deg);

    pointer-events: none;
}






#categoryFilter:focus {
    border-color: #aab5ff;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.08);
}


/* ============================================================
   EXTENSION BOX
   ============================================================ */

/* .extension-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 25px 27px;

    margin-bottom: 36px;

    border: 1px solid #e4e7ed;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafbff 100%
        );

    box-shadow:
        0 8px 30px rgba(20, 30, 55, 0.055);

    position: relative;

    overflow: hidden;
} */




.extension-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 25px 27px;
    margin-bottom: 36px;

    border: 1px solid #e4e7ed;
    border-radius: 20px;

    /* Background image */
    background:
        linear-gradient(
            90deg,
            rgba(220, 220, 220, 0.548) 0%,
            rgba(192, 192, 192, 0.96) 18%,
            rgba(192, 192, 192, 0.96) 30%,
            rgba(176, 176, 176, 0.96) 56%,
            rgba(0, 0, 0, 0.28) 100%
        ),
        url("/static/images/Mazes1.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 8px 30px rgba(20, 30, 55, 0.055);

    position: relative;
    overflow: hidden;
}












.extension-box::after {
    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.055);

    right: -70px;

    top: -90px;

    pointer-events: none;
}


.extension-content {
    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 0;

    position: relative;

    z-index: 1;
}


.extension-icon {
    margin-left: 20px;
    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #303a4d
        );

    color: white;

    font-size: 19px;

    box-shadow:
        0 8px 18px rgba(17, 24, 39, 0.16);
}


.extension-text {
    min-width: 0;
}


.extension-label {
    display: block;

    margin-bottom: 5px;

    color: #404040;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.extension-text h2 {
    margin: 0;

    color: #171d2b;

    font-size: 18px;

    line-height: 1.3;

    letter-spacing: -0.2px;
}


.extension-text p {
    margin: 5px 0 0;

    color: #353535;

    font-size: 13px;

    line-height: 1.55;

    max-width: 620px;
}


/* ============================================================
   INSTALL BUTTON
   ============================================================ */

.install-link {
    text-decoration: none;

    flex-shrink: 0;

    position: relative;

    z-index: 2;
}


.install-button {
    margin-right: 40px;
    height: 44px;

    padding: 0 19px;

    border: 4px solid #171d2b;

    border-radius: 11px;

    background: #171d2b;
    

    color:#79b1ff ;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    box-shadow:
        0 7px 18px rgba(17, 24, 39, 0.16);

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        background 0.2s;
}


.install-button:hover {
    background: #2878E5;
    border-color: #040e1f;
    color: rgb(255, 255, 255);

    

    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(37, 99, 235, 0.2);
}


.install-button span {
    font-size: 17px;
}


/* ============================================================
   NOTES SECTION
   ============================================================ */

.notes-section {
    width: 100%;
}


.section-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 17px;
}


.section-label {
    display: block;

    color: #929aaa;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 4px;
}


.section-heading h2 {
    margin: 0;

    color: #171d2b;

    font-size: 21px;

    letter-spacing: -0.4px;
}


/* ============================================================
   NOTES GRID
   ============================================================ */

.notes-grid {
    display: grid;

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

    gap: 18px;

    align-items: start;
}


/* ============================================================
   NOTE CARD
   ============================================================ */

.note-card {
    position: relative;

    background: #ffffff;

    padding: 21px;

    border: 1px solid #e5e8ee;

    border-radius: 17px;

    box-shadow:
        0 5px 18px rgba(17, 24, 39, 0.045);

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}



.note-card{
    height:350px;
    display:flex;
    flex-direction:column;
}

.note-card p{
    flex:1;
    overflow-y:auto;
    white-space:pre-wrap;
    padding-right:5px;
}











.note-card::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 4px;

    height: 100%;

    background:
        linear-gradient(
            180deg,
            #6366f1,
            #8b5cf6
        );

    opacity: 0;

    transition: opacity 0.2s;
}


.note-card:hover {
    transform: translateY(-4px);

    border-color: #d8dcf0;

    box-shadow:
        0 14px 30px rgba(17, 24, 39, 0.09);
}


.note-card:hover::before {
    opacity: 1;
}


.note-card h3 {
    margin-top: 0;

    color: #171d2b;

    font-size: 17px;

    line-height: 1.4;

    letter-spacing: -0.2px;
}


.note-card p {
    white-space: pre-wrap;

    word-wrap: break-word;

    overflow-wrap: anywhere;

    line-height: 1.65;

    color: #697386;

    font-size: 13px;
}


/* ============================================================
   RIGHT PANEL
   ============================================================ */

.right-panel {
    order: 2;

    width: 255px;

    flex-shrink: 0;

    background: #ffffff;

    border-left: 1px solid #e7e9ee;

    min-height: 100vh;

    padding: 25px 18px;

    position: sticky;

    top: 0;

    height: 100vh;
}


.right-panel-inner {
    height: 100%;

    display: flex;

    flex-direction: column;
}


/* ============================================================
   RIGHT BRAND
   ============================================================ */

.right-brand {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 5px 7px 18px;
}


.right-brand-icon {
    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #374151
        );

    font-size: 19px;

    box-shadow:
        0 6px 15px rgba(17, 24, 39, 0.13);
}


.right-brand-name {
    color: #151b28;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.3;
}


.right-brand-subtitle {
    margin-top: 2px;

    color: #9aa2b1;

    font-size: 11px;

    font-weight: 500;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.right-divider {
    height: 1px;

    background: #eceef2;

    margin: 0 6px 25px;
}


/* ============================================================
   QUICK ACTIONS
   ============================================================ */

.quick-actions-title {
    padding: 0 9px;

    margin-bottom: 10px;

    color: #a0a7b5;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.side-action {
    width: 100%;

    height: 46px;

    border: none;

    border-radius: 11px;

    background: transparent;

    color: #4d5667;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 0 10px;

    margin-bottom: 5px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    text-align: left;

    transition:
        background 0.18s,
        color 0.18s,
        transform 0.18s;
}


.side-action:hover {
    background: #f4f6fa;

    color: #171d2b;

    transform: translateX(2px);
}


.side-action-icon {
    width: 29px;

    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #f1f3f7;

    font-size: 13px;
}


.logout-side:hover {
    color: #dc2626;

    background: #fff5f5;
}


.logout-side:hover .side-action-icon {
    background: #fee2e2;
}


/* ============================================================
   SIDE FOOTER
   ============================================================ */

.right-spacer {
    flex: 1;
}


.side-footer {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin: 15px 4px 4px;

    padding: 13px 11px;

    border-radius: 12px;

    background: #f8f9fb;

    border: 1px solid #eef0f4;
}


.footer-dot {
    width: 7px;

    height: 7px;

    flex-shrink: 0;

    margin-top: 4px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.09);
}


.side-footer strong {
    display: block;

    color: #444c5b;

    font-size: 11px;
}


.side-footer span {
    display: block;

    margin-top: 3px;

    color: #9aa1ae;

    font-size: 10px;

    line-height: 1.4;
}


/* ============================================================
   MODAL
   ============================================================ */

.modal {
    display: none;

    position: fixed;

    z-index: 9999;

    inset: 0;

    background: rgba(15, 23, 42, 0.38);

    backdrop-filter: blur(5px);

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.modal-content {
    width: min(700px, 100%);

    max-height: 85vh;

    overflow-y: auto;

    background: white;

    border-radius: 20px;

    padding: 25px;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.2);
}


/* ============================================================
   NOTE DETAIL
   ============================================================ */

.note-detail {
    max-width: 900px;

    margin: -15px auto;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e5e8ee;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(17, 24, 39, 0.06);
}


.note-detail h1 {
    color: #171d2b;

    line-height: 1.3;
}


.note-detail hr {
    border: 0;

    border-top: 1px solid #eceef2;

    margin: 20px 0;
}


.note-detail textarea {
    width: 100%;

    min-height: 90px;

    padding: 15px;

    border: 1px solid #dfe3ea;

    border-radius: 12px;

    resize: vertical;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.65;

    color: #374151;

    outline: none;

    background: #fafbfc;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}


.note-detail textarea:focus {
    border-color: #aab5ff;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.08);
}


.note-actions {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}


.note-actions button {
    border: none;

    border-radius: 10px;

    padding: 10px 17px;

    background: #171d2b;

    color: white;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s,
        opacity 0.2s;
}


.note-actions button:hover {
    transform: translateY(-1px);

    opacity: 0.9;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .right-panel {
        width: 220px;
    }

    .main {
        padding: 28px 28px 45px;
    }

    .notes-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(230px, 1fr)
            );
    }

}


@media (max-width: 850px) {

    .app {
        display: block;
    }


    .right-panel {
        position: static;

        width: 100%;

        min-height: auto;

        height: auto;

        border-left: none;

        border-top: 1px solid #e7e9ee;

        padding: 18px 20px;
    }


    .right-panel-inner {
        height: auto;
    }


    .quick-actions {
        display: flex;

        align-items: center;

        gap: 8px;
    }


    .quick-actions-title {
        display: none;
    }


    .side-action {
        width: auto;

        margin: 0;
    }


    .side-footer,
    .right-spacer {
        display: none;
    }


    .right-divider {
        display: none;
    }


    .right-brand {
        padding-bottom: 12px;
    }


    .main {
        padding: 25px 22px 40px;
    }

}


@media (max-width: 650px) {

    .top-header {
        align-items: flex-start;

        margin-bottom: 24px;
    }


    .header-left h1 {
        font-size: 26px;
    }


    .toolbar {
        flex-direction: column;

        align-items: stretch;
    }


    .filter-wrapper {
        width: 100%;
    }


    .extension-box {
        flex-direction: column;

        align-items: flex-start;

        padding: 21px;
    }


    .install-link {
        width: 100%;
    }


    .install-button {
        width: 100%;
    }


    .notes-grid {
        grid-template-columns: 1fr;
    }


    .right-brand {
        justify-content: space-between;
    }

}


@media (max-width: 450px) {

    .main {
        padding: 20px 15px 30px;
    }


    .header-left {
        gap: 12px;
    }


    .brand-mark {
        width: 46px;

        height: 46px;

        border-radius: 13px;
    }


    .header-left h1 {
        font-size: 23px;
    }


    .welcome-text {
        font-size: 12px;
    }


    .extension-content {
        align-items: flex-start;
    }


    .extension-icon {
        width: 44px;

        height: 44px;
    }


    .extension-text h2 {
        font-size: 16px;
    }


    .extension-text p {
        font-size: 12px;
    }


    .side-action {
        flex: 1;

        justify-content: center;
    }

}














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

.site-header{
    height:150px;
    padding:0 65px 0 50px;

    background:#0f172a;
    border-bottom:1px solid #1e293b;

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

.site-header-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.site-logo{
    width:44px;
    height:44px;

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

    border-radius:12px;

    background:#ff2d2d;
    color:white;
    font-size:18px;
}









.site-logo {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;
}

.site-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}












.site-brand h2{
    margin:0;
    color:white;
    font-size:18px;
}

.site-brand span{
    color:#94a3b8;
    font-size:12px;
}

.site-nav{
    display:flex;
    gap:30px;
}

.site-nav a{
    text-decoration:none;
    color:#cbd5e1;
    font-size:14px;
    font-weight:600;
    transition:0.2s;
}

.site-nav a:hover{
    color:white;
}


/* ============================================================
   FOOTER
============================================================ */

.site-footer{
    margin-top:0px;

    padding:70px 50px 70px 40px;

    background:#0f172a;
    border-top:1px solid #1e293b;

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

.footer-left{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.footer-left strong{
    color:white;
}






.footer-left strong img{
    width: 20px;
    height: 20px;

    margin-bottom: -3px;
    margin-right: 5px;

    
   
    
}









.footer-left span{
    color:#94a3b8;
    font-size:13px;
}

.footer-right{
    display:flex;
    gap:20px;
}

.footer-right a{
    text-decoration:none;
    color:#94a3b8;
    font-size:13px;
    transition:0.2s;
}

.footer-right a:hover{
    color:white;
}


/* MOBILE */

@media(max-width:768px){

    .site-header{
        height:auto;
        padding:18px 20px;
        flex-direction:column;
        gap:15px;
    }

    .site-nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .site-footer{
        flex-direction:column;
        text-align:center;
    }
}







/* ============================================================
   CLIKNOTEZ PEN CURSOR
============================================================ */

/* body {
    cursor: url("/static/images/cliknotez_pen_cursor.svg") 5 43, auto;
}

button,
a,
select,
.note-card,
.install-link {
    cursor: pointer;
}

input,
textarea {
    cursor: text;
} */











/* body {
    cursor: url("/static/images/cliknotez_obsidian_cursor.svg") 5 44, auto;
}




button,
a,
select,
input[type="button"],
input[type="submit"] {
    cursor: pointer;
}

input[type="text"],
textarea {
    cursor: text;
} */




.dashboard-icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

.search-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}














/* Dashboard SVG icon alignment */

.brand-icon,
.filter-icon,
.extension-icon,
.right-brand-icon,
.side-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.extension-icon .dashboard-icon {
    width: 25px;
    height: 25px;
}

.right-brand-icon .dashboard-icon {
    width: 26px;
    height: 26px;
}

.side-action-icon .dashboard-icon {
    width: 17px;
    height: 17px;
}

.note-category,
.note-date-time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.note-category .dashboard-icon,
.note-date-time .dashboard-icon {
    width: 20px;
    height: 20px;
}

.install-button .dashboard-icon {
    width: 18px;
    height: 18px;
}














/* ==================================================
   NOTE DETAIL SVG ICONS
   ================================================== */

.detail-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    margin-right: 4px;
    flex-shrink: 0;
}

.back-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
}

.note-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}



.timestamp-icon {
    /* margin-left: -1px;
    margin-right: 0px; */
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}











/* =====================================
   NOTES PAGINATION
===================================== */

/* #pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;
    padding: 15px 0;
}

.pagination-info {
    font-size: 14px;
    color: #667085;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pagination-controls button {
    min-width: 38px;
    height: 38px;

    padding: 0 12px;

    border: 1px solid #dfe3e8;
    border-radius: 8px;

    background: #ffffff;
    color: #273142;

    cursor: pointer;
    font-size: 14px;
}

.pagination-controls button:hover:not(:disabled) {
    background: #f0f2f5;
}

.pagination-controls button.active {
    background: #172033;
    color: #ffffff;
    border-color: #172033;
}

.pagination-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 650px) {

    #pagination {
        flex-direction: column;
        align-items: center;
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

}


 */






 
/* =====================================
   PAGINATION BOX
===================================== */

#pagination {

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

    gap: 20px;

    padding: 50px 80px 50px 65px;
    margin-top: 30px;
    margin-bottom: -20px;

    border: 1px solid #e4e7ed;
    border-radius: 20px;


    /* Same background as extension-box */

    background:
        linear-gradient(
            90deg,
            rgba(220, 220, 220, 0.548) 0%,
            rgba(176, 176, 176, 0.78) 18%,
            rgba(176, 176, 176, 0.78) 30%,
            rgba(176, 176, 176, 0.78) 56%,
            rgba(176, 176, 176, 0.68) 65%,
            rgba(176, 176, 176, 0.58) 75%,
            rgba(0, 0, 0, 0.28) 100%
        ),
        url("/static/images/Mazes1.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 8px 30px rgba(20, 30, 55, 0.055);

    position: relative;
    overflow: hidden;

}


/* Pagination information */

.pagination-info {

    font-size: 14px;
    font-weight: 500;
    color: #273142;

}


/* Pagination buttons container */

.pagination-controls {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

}


/* Individual buttons */

.pagination-controls button {

    min-width: 40px;
    height: 40px;

    padding: 0 23px;

    border: 1px solid rgba(40, 40, 40, 0.7);
    border-radius: 9px;

    background: rgba(183, 183, 183, 0.85);

    color: #172033;

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

    cursor: pointer;

    transition: all 0.2s ease;

}


/* Hover */

.pagination-controls button:hover:not(:disabled) {

    background: #cacaca;

    border-color: #172033;

    transform: translateY(-2px);

}


/* Active page */

.pagination-controls button.active {

    background: #172033;

    color: #979797;

    border-color: #172033;

}


/* Disabled buttons */

.pagination-controls button:disabled {

    opacity: 0.45;

    cursor: not-allowed;

    transform: none;

}


/* Mobile */

@media (max-width: 650px) {

    #pagination {

        flex-direction: column;
        align-items: center;

        padding: 22px 18px;

    }

    .pagination-controls {

        justify-content: center;

    }

}




































/* ClikNotez public pages. Kept separate from dashboard.css. */
:root {
    --navy: #0f172a;
    --navy-border: #1e293b;
    --ink: #172033;
    --muted: #64748b;
    --surface: #ffffff;
    --page: #f7f8fb;
    --line: #e5eaf1;
    --accent: #2563eb;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.public-header {
    min-height: 92px;
    padding: 20px clamp(22px, 6vw, 65px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--navy);
    border-bottom: 1px solid var(--navy-border);
}
.brand {
    color: #fff;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.4px;
}
.brand:hover, .public-nav a:hover, .public-footer a:hover { color: #fff; text-decoration: none; }
.public-nav, .public-footer nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
}
.public-nav a, .public-footer a { color: #cbd5e1; font-size: 14px; font-weight: 550; }
.public-nav a[aria-current="page"] { color: #fff; }
.page-shell {
    width: min(100% - 40px, 900px);
    margin: 0 auto;
    padding: 62px 0 76px;
    flex: 1;
}
.narrow-shell { max-width: 720px; }
.policy-shell { max-width: 880px; }
.page-hero { margin: 0 0 30px; }
.eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.page-hero h1 {
    margin: 9px 0 8px;
    color: var(--ink);
    font-size: clamp(32px, 5vw, 43px);
    line-height: 1.15;
    letter-spacing: -1.3px;
}
.page-hero p { margin: 0; color: var(--muted); font-size: 16px; }
.content-card {
    padding: clamp(22px, 4vw, 36px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .045);
}
.content-card + .content-card { margin-top: 22px; }
.content-card h2 { margin: 0 0 18px; font-size: 21px; letter-spacing: -.35px; }
.faq-item { padding: 17px 0; border-top: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 0; padding-top: 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item h3 { margin: 0 0 6px; font-size: 16px; }
.faq-item p, .policy-content p, .policy-content li { color: #475569; font-size: 14px; }
.faq-item p { margin: 0; }
.help-callout {
    margin-top: 22px;
    padding: 25px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 16px;
    background: #eaf1ff;
}
.help-callout h2 { margin: 0 0 3px; font-size: 19px; }
.help-callout p { margin: 0; color: #52627a; font-size: 14px; }
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 19px;
    border: 0;
    border-radius: 9px;
    background: var(--navy);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}
.button-link:hover { background: #1e293b; color: #fff; text-decoration: none; }
.contact-form { display: grid; gap: 19px; }
.form-field { display: grid; gap: 7px; }
.form-field label { font-size: 14px; font-weight: 650; }
.form-field input, .form-field textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #d7deea;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}
.form-field input:focus, .form-field textarea:focus {
    border-color: #7aa5f8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.form-field textarea { resize: vertical; min-height: 150px; }
.submit-button { justify-self: start; }
.alternate-contact { margin: 24px 0 0; color: var(--muted); font-size: 13px; }
.notice { margin-bottom: 18px; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.notice.success { background: #ecfdf3; color: #166534; }
.notice.error { background: #fef2f2; color: #991b1b; }
.policy-content h2 { margin: 28px 0 8px; font-size: 18px; }
.policy-content h2:first-of-type { margin-top: 22px; }
.policy-content p { margin: 0 0 13px; }
.policy-content ul { padding-left: 22px; margin: 8px 0 16px; }
.policy-content li { margin: 7px 0; }
.public-footer {
    min-height: 100px;
    padding: 25px clamp(22px, 6vw, 65px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--navy);
    border-top: 1px solid var(--navy-border);
    color: #94a3b8;
    font-size: 13px;
}
.public-footer nav { gap: 22px; }
.public-footer a { font-size: 13px; }
@media (max-width: 640px) {
    .public-header { align-items: flex-start; flex-direction: column; gap: 13px; }
    .public-nav { gap: 18px; }
    .page-shell { width: min(100% - 28px, 900px); padding: 42px 0 54px; }
    .help-callout, .public-footer { align-items: flex-start; flex-direction: column; }
    .public-footer nav { gap: 18px; }
}