/* =========================================================
   DASHBOARD RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f8fafb;
    color: #0d1b2a;
    font-family: 'Inter', sans-serif;
    padding-bottom: 90px;
}


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

.dashboard-header {

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #e7ecef;

    position: sticky;
    top: 0;

    z-index: 100;
}


.dashboard-header-inner {

    max-width: 1440px;

    height: 82px;

    margin: 0 auto;

    padding: 0 38px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   LOGO
========================================================= */

.dashboard-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;
}


.dashboard-logo img {

    width: 190px;

    height: auto;

    display: block;
}


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

.dashboard-actions {

    display: flex;

    align-items: center;

    gap: 18px;
}


/* =========================================================
   ICON BUTTON
========================================================= */

.dashboard-icon-btn {

    width: 44px;
    height: 44px;

    border: 0;

    background: transparent;

    padding: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    position: relative;
}


.dashboard-icon-btn svg {

    width: 25px;
    height: 25px;

    fill: none;

    stroke: #0d1b2a;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.dashboard-icon-btn:hover {

    background: #f1f7f4;

    border-radius: 12px;
}


/* =========================================================
   NOTIFICATION
========================================================= */

.notification-btn {

    position: relative;
}


.notification-dot {

    width: 9px;
    height: 9px;

    background: #119261;

    border: 2px solid #ffffff;

    border-radius: 50%;

    position: absolute;

    top: 7px;
    right: 7px;
}


/* =========================================================
   PROFILE
========================================================= */

.dashboard-profile {

    border: 0;

    background: transparent;

    padding: 0;

    cursor: pointer;
}


.profile-avatar {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #119261;

    color: #ffffff;

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

    font-size: 17px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.dashboard-main {

    max-width: 1440px;

    margin: 0 auto;

    padding: 48px 38px 100px;
}


/* =========================================================
   WELCOME
========================================================= */

.dashboard-welcome {

    margin-bottom: 40px;
}


.dashboard-welcome h1 {

    margin: 0 0 8px;

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

    font-size: 38px;

    line-height: 1.25;

    font-weight: 600;

    letter-spacing: -0.7px;
}


.dashboard-welcome h1 span {

    font-size: 34px;

    margin-left: 5px;
}


.dashboard-welcome p {

    margin: 0;

    color: #64748b;

    font-size: 18px;

    line-height: 1.6;
}


/* =========================================================
   TEMPORARY PLACEHOLDER
========================================================= */

.dashboard-placeholder {

    min-height: 400px;

    border: 1px dashed #cbd5da;

    border-radius: 20px;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #94a3b8;

    font-size: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .dashboard-header-inner {

        height: 76px;

        padding: 0 28px;
    }


    .dashboard-logo img {

        width: 170px;
    }


    .dashboard-actions {

        gap: 10px;
    }


    .dashboard-main {

        padding: 40px 28px 80px;
    }


    .dashboard-welcome h1 {

        font-size: 34px;
    }


    .dashboard-welcome p {

        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .dashboard-header-inner {
        height: 68px;
        padding: 0 18px;
    }

    .dashboard-logo img {
        width: 145px;
    }

    .dashboard-actions {
        gap: 4px;
    }

    .dashboard-icon-btn {
        width: 40px;
        height: 40px;
        padding: 7px;
    }

    .dashboard-icon-btn svg {
        width: 23px;
        height: 23px;
    }

    .notification-dot {
        width: 8px;
        height: 8px;
        top: 6px;
        right: 6px;
    }

    .profile-avatar {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .dashboard-main {
        padding: 32px 18px 70px;
    }

    .dashboard-welcome {
        margin-bottom: 30px;
    }

    .dashboard-greeting {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: nowrap;

        white-space: nowrap;

        font-size: 24px;
        line-height: 1.3;
        letter-spacing: -0.5px;
    }

    .greeting-text {
        white-space: nowrap;
    }

    .greeting-icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    .dashboard-welcome p {
        font-size: 16px;
        line-height: 1.55;
    }

    .dashboard-placeholder {
        min-height: 300px;
        border-radius: 18px;
    }
}

/* =========================================================
   TODAY'S FOCUS
========================================================= */

.today-focus {

    width: 100%;

    display: grid;

    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);

    align-items: stretch;

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

    border: 1px solid #dfe8e5;

    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .04);

    overflow: hidden;
}


/* =========================================================
   TASK AREA
========================================================= */

.focus-tasks {

    padding: 24px 28px;
}


/* TITLE */

.focus-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
}


.focus-title-icon {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #119261;

    font-size: 27px;

    font-weight: 700;
}


.focus-title h2 {

    margin: 0;

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

    color: #0D1B2A;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   TASK ROW
========================================================= */

.focus-task-list {

    display: flex;

    flex-direction: column;
}


.focus-task {

    display: grid;

    grid-template-columns: 34px minmax(0, 1fr) 70px;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    border-bottom: 1px solid #edf1f0;
}


.focus-task:last-child {

    border-bottom: none;
}


/* =========================================================
   CHECK BUTTON
========================================================= */

.task-check {

    width: 27px;

    height: 27px;

    padding: 0;

    border: 2px solid #8b98a5;

    border-radius: 50%;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.task-check.checked {

    background: #1aa276;

    border-color: #1aa276;
}


.focus-task.completed .task-name {

    color: #7a838c;

    text-decoration: line-through;
}


/* =========================================================
   TASK NAME
========================================================= */

.task-name {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #172235;

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

    font-size: 16px;

    line-height: 1.4;
}


.task-emoji {

    font-size: 18px;

    flex-shrink: 0;
}


/* =========================================================
   STATUS
========================================================= */

.task-status {

    color: #119261;

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

    font-size: 14px;

    text-align: right;
}


.task-status.done {

    color: #119261;
}


/* =========================================================
   TIMER
========================================================= */

.focus-timer {

    border-left: 1px solid #dfe8e5;

    padding: 24px 28px;

    display: flex;

    flex-direction: column;
}


.timer-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;
}


.timer-label {

    color: #172235;

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

    font-size: 16px;

    font-weight: 600;
}


.timer-start {

    border: none;

    background: transparent;

    color: #119261;

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

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    padding: 4px 0;
}


/* =========================================================
   TIMER CONTENT
========================================================= */

.timer-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


.timer-ring {

    width: 132px;

    height: 132px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    background:
        conic-gradient(
            #119261 0deg,
            #119261 285deg,
            #dcebe5 285deg,
            #dcebe5 360deg
        );
}


.timer-ring::before {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background: #ffffff;
}


.timer-value {

    position: relative;

    z-index: 1;

    color: #2b9b7d;

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

    font-size: 30px;

    font-weight: 700;

    letter-spacing: -1px;
}


.timer-content p {

    margin: 8px 0 0;

    color: #64748B;

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

    font-size: 14px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .today-focus {

        grid-template-columns: 1fr 250px;

        border-radius: 20px;
    }


    .focus-tasks {

        padding: 22px;
    }


    .focus-timer {

        padding: 22px 20px;
    }


    .focus-task {

        grid-template-columns: 32px minmax(0, 1fr) 55px;

        gap: 9px;
    }


    .task-name {

        font-size: 15px;
    }


    .task-status {

        font-size: 13px;
    }


    .timer-ring {

        width: 110px;

        height: 110px;
    }


    .timer-value {

        font-size: 26px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .today-focus {

        display: flex;

        flex-direction: column;

        border-radius: 18px;
    }


    .focus-tasks {

        padding: 20px 18px 12px;
    }


    .focus-title {

        margin-bottom: 12px;
    }


    .focus-title h2 {

        font-size: 18px;
    }


    .focus-task {

        grid-template-columns: 30px minmax(0, 1fr) 48px;

        min-height: 52px;

        gap: 8px;
    }


    .task-check {

        width: 25px;

        height: 25px;
    }


    .task-name {

        font-size: 14px;

        line-height: 1.35;
    }


    .task-status {

        font-size: 12px;
    }


    .focus-timer {

        border-left: none;

        border-top: 1px solid #dfe8e5;

        padding: 18px;
    }


    .timer-top {

        margin-bottom: 4px;
    }


    .timer-content {

        flex-direction: row;

        justify-content: space-between;

        gap: 20px;

        padding: 5px 10px;
    }


    .timer-ring {

        width: 90px;

        height: 90px;

        flex-shrink: 0;
    }


    .timer-ring::before {

        inset: 6px;
    }


    .timer-value {

        font-size: 22px;
    }


    .timer-content p {

        margin: 0;

        flex: 1;

        text-align: left;

        font-size: 14px;
    }
}

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

.quick-actions {

    margin-top: 28px;

    width: 100%;
}


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

.quick-actions-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

    padding: 0 4px;
}


.quick-actions-header h2 {

    margin: 0;

    color: #0D1B2A;

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

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;
}


.customize-actions {

    display: flex;

    align-items: center;

    gap: 7px;

    border: none;

    background: transparent;

    color: #238d70;

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

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    padding: 5px;
}


.customize-actions span {

    font-size: 20px;

    line-height: 1;
}


/* =========================================================
   ACTION GRID
========================================================= */

.quick-actions-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;
}


/* =========================================================
   ACTION CARD
========================================================= */

.quick-action {

    min-width: 0;

    min-height: 118px;

    padding: 18px 12px;

    border: 1px solid #e2e9e7;

    border-radius: 18px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, .035);

    cursor: pointer;

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


.quick-action:hover {

    transform: translateY(-3px);

    border-color: #c9ded7;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, .07);
}


/* =========================================================
   ICON
========================================================= */

.quick-action-icon {

    width: 52px;

    height: 52px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    line-height: 1;
}


/* Different soft backgrounds */

.note-icon {

    background: #E5F7F1;
}


.scan-icon {

    background: #EAF2FF;

    color: #3478d4;

    font-size: 28px;
}


.upload-icon {

    background: #FFF5DE;

    font-size: 25px;
}


.todo-icon {

    background: #F2EBFF;

    color: #8054d6;

    font-size: 29px;
}


.reminder-icon {

    background: #FFF0F0;

    font-size: 25px;
}


/* =========================================================
   TITLE
========================================================= */

.quick-action-title {

    color: #172235;

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

    font-size: 15px;

    font-weight: 600;

    line-height: 1.3;

    text-align: center;
}

/*===============
Tablet
=================*/
@media (max-width: 900px) {

    .quick-actions {

        margin-top: 24px;
    }


    .quick-actions-grid {

        gap: 10px;
    }


    .quick-action {

        min-height: 110px;

        padding: 15px 8px;

        border-radius: 16px;
    }


    .quick-action-icon {

        width: 48px;

        height: 48px;

        border-radius: 14px;

        font-size: 24px;
    }


    .quick-action-title {

        font-size: 14px;
    }
}


/*===============
Mobile 
=================*/
@media (max-width: 600px) {

    .quick-actions {

        margin-top: 22px;
    }


    .quick-actions-header {

        margin-bottom: 12px;

        padding: 0 2px;
    }


    .quick-actions-header h2 {

        font-size: 18px;
    }


    .customize-actions {

        font-size: 13px;
    }


    .quick-actions-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


    .quick-action {

        min-height: 105px;

        padding: 14px 10px;

        border-radius: 16px;
    }


    .quick-action-icon {

        width: 48px;

        height: 48px;

        border-radius: 14px;

        font-size: 23px;
    }


    .quick-action-title {

        font-size: 14px;
    }
}

/* ================================
   FREQUENTLY USED
================================ */

.frequently-used-section {
    margin-top: 42px;
    margin-bottom: 50px;
}

.frequently-used-section .section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.frequently-used-section .section-heading h2 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #101d2d;
}

.customize-btn {
    border: 0;
    background: transparent;
    color: #168f68;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.customize-btn span {
    font-size: 20px;
    margin-left: 5px;
}

.frequently-used-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.frequent-item {
    display: flex;
    align-items: center;
    min-height: 88px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e1e6e9;
    border-radius: 18px;
    text-decoration: none;
    box-sizing: border-box;
    transition: 0.2s ease;
}

.frequent-item:hover {
    border-color: #20a477;
    transform: translateY(-2px);
}

.frequent-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 14px;
}

.file-icon {
    background: #eaf8f3;
}

.folder-icon {
    background: #edf3ff;
}

.note-icon {
    background: #f5edff;
}

.tool-icon {
    background: #fff5df;
}

.frequent-info {
    min-width: 0;
    flex: 1;
}

.frequent-info h3 {
    margin: 0 0 5px;
    color: #172333;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frequent-info p {
    margin: 0;
    color: #718092;
    font-size: 14px;
}

.frequent-arrow {
    margin-left: 12px;
    color: #168f68;
    font-size: 22px;
    font-weight: 500;
}

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

@media (max-width: 600px) {

    .frequently-used-section {
        margin-top: 34px;
        margin-bottom: 40px;
    }

    .frequently-used-section .section-heading h2 {
        font-size: 19px;
        font-weight: 700;
    }

    .customize-btn {
        font-size: 14px;
    }

    .frequently-used-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .frequent-item {
        min-height: 76px;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .frequent-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 21px;
        margin-right: 12px;
    }

    .frequent-info h3 {
        font-size: 15px;
    }

    .frequent-info p {
        font-size: 13px;
    }

    .frequent-arrow {
        font-size: 20px;
    }
}

/* =========================================
   KEEP CANVAS — YOUR SPACES
========================================= */

.kc-spaces-section {
    width: 100%;
    margin-top: 42px;
    margin-bottom: 40px;
}

/* Header */

.kc-spaces-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 4px;
}

.kc-spaces-header h2 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: #122033;
}

.kc-spaces-view-all {
    border: none;
    background: transparent;
    padding: 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: #218c70;
    cursor: pointer;
}

/* Grid */

.kc-spaces-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Card */

.kc-space-card {
    min-height: 155px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e1e5e7;
    border-radius: 22px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

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

.kc-space-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(20, 35, 50, 0.07);
}

/* Icon */

.kc-space-icon {
    width: 62px;
    height: 62px;

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

    border-radius: 18px;

    font-size: 31px;
    line-height: 1;

    margin-bottom: 17px;
}

/* Soft pastel icon backgrounds */

.kc-icon-daily {
    background: #e8f7f1;
}

.kc-icon-notes {
    background: #f0eaff;
}

.kc-icon-documents {
    background: #eaf2ff;
}

.kc-icon-ideas {
    background: #fff5dc;
}

.kc-icon-projects {
    background: #eaf3ff;
}

.kc-icon-images {
    background: #ffedf0;
}

/* Text */

.kc-space-name {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
    color: #172536;
}

.kc-space-count {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.3;
    color: #7b8794;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .kc-spaces-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .kc-spaces-section {
        margin-top: 36px;
        margin-bottom: 30px;
    }

    .kc-spaces-header {
        margin-bottom: 16px;
    }

    .kc-spaces-header h2 {
        font-size: 25px;
    }

    .kc-spaces-view-all {
        font-size: 15px;
    }

    .kc-spaces-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .kc-space-card {
        min-height: 145px;
        padding: 17px;
        border-radius: 19px;
    }

    .kc-space-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 26px;
        margin-bottom: 13px;
    }

    .kc-space-name {
        font-size: 17px;
    }

    .kc-space-count {
        font-size: 13px;
        margin-top: 4px;
    }

}

/* =========================================
   KEEP CANVAS — BOTTOM NAVIGATION
========================================= */

.kc-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 76px;

    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #e5e8ea;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;

    z-index: 9999;

    box-sizing: border-box;

    padding: 0 10px;

    box-shadow: 0 -4px 18px rgba(20, 35, 50, 0.05);

    /* Safe area for phones with gesture navigation */
    padding-bottom: env(safe-area-inset-bottom);
}


/* =========================================
   NORMAL NAV ITEMS
========================================= */

.kc-nav-item {
    height: 100%;

    border: none;
    background: transparent;

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

    gap: 5px;

    color: #667381;

    font-family: inherit;

    cursor: pointer;

    padding: 5px 2px;

    -webkit-tap-highlight-color: transparent;
}


/* Icons */

.kc-nav-item svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Labels */

.kc-nav-item span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}


/* Active item */

.kc-nav-item.kc-nav-active {
    color: #15916f;
}

.kc-nav-item.kc-nav-active span {
    font-weight: 600;
}


/* =========================================
   CENTER + BUTTON
========================================= */

.kc-nav-add {
    width: 62px;
    height: 62px;

    justify-self: center;

    border: none;
    border-radius: 50%;

    background: #15916f;

    color: #ffffff;

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

    cursor: pointer;

    margin-top: -24px;

    box-shadow:
        0 6px 16px rgba(21, 145, 111, 0.25);

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.kc-nav-add svg {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
}


.kc-nav-add:active {
    transform: scale(0.93);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .kc-bottom-nav {
        height: 72px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .kc-nav-item svg {
        width: 24px;
        height: 24px;
    }

    .kc-nav-item span {
        font-size: 11px;
    }

    .kc-nav-add {
        width: 58px;
        height: 58px;

        margin-top: -22px;
    }

    .kc-nav-add svg {
        width: 29px;
        height: 29px;
    }

}

/* =========================================
   KEEP CANVAS — SMART BOTTOM NAV
   Hide on scroll down / Show on scroll up
========================================= */

.kc-bottom-nav {
    transition:
        transform 0.28s ease,
        opacity 0.2s ease;
}

/* Hidden while scrolling down */
.kc-bottom-nav.kc-nav-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   KEEP CANVAS — BOTTOM NAVIGATION
========================================= */

.kc-bottom-nav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    height: 92px;

    background: rgba(255, 255, 255, 0.97);

    border-top: 1px solid #e6eaec;

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

    z-index: 9000;

    box-sizing: border-box;

    padding: 0 12px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.kc-bottom-nav-item {
    width: 20%;

    height: 70px;

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

    gap: 5px;

    text-decoration: none;

    color: #697581;

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

    font-size: 13px;

    font-weight: 500;
}


.kc-bottom-nav-icon {
    width: 27px;
    height: 27px;

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


.kc-bottom-nav-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.kc-bottom-nav-active {
    color: #15916f;

    font-weight: 600;
}


/* =========================================
   PLUS BUTTON
========================================= */

.kc-bottom-add {
    width: 72px;
    height: 72px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background: #15916f;

    color: #ffffff;

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

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

    font-size: 42px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    margin-top: -30px;

    box-shadow:
        0 8px 22px rgba(21, 145, 111, 0.22);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.kc-bottom-add:active {
    transform: scale(0.94);
}


/* =========================================
   MORE DOTS
========================================= */

.kc-more-dots {
    font-size: 22px;

    letter-spacing: 3px;

    line-height: 1;
}


/* =========================================
   ADD ACTION OVERLAY
========================================= */

.kc-add-overlay {
    position: fixed;

    inset: 0;

    z-index: 10000;

    background: rgba(15, 25, 35, 0.28);

    display: flex;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.kc-add-overlay.kc-add-visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================
   ADD SHEET
========================================= */

.kc-add-sheet {
    width: min(
        100%,
        520px
    );

    background: #ffffff;

    border-radius:
        24px
        24px
        0
        0;

    padding:
        10px
        18px
        28px;

    box-sizing: border-box;

    transform: translateY(100%);

    transition:
        transform 0.25s ease;

    box-shadow:
        0 -10px 35px
        rgba(20, 35, 50, 0.14);
}


.kc-add-visible .kc-add-sheet {
    transform: translateY(0);
}


/* =========================================
   SHEET HANDLE
========================================= */

.kc-add-sheet-handle {
    width: 42px;
    height: 4px;

    border-radius: 999px;

    background: #dce2e5;

    margin: 2px auto 15px;
}


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

.kc-add-sheet-header {
    min-height: 54px;

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

    gap: 15px;

    border-bottom: 1px solid #edf0f2;

    margin-bottom: 10px;
}


.kc-add-sheet-header h3 {
    margin: 0 0 3px;

    color: #172536;

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

    font-size: 19px;

    font-weight: 700;
}


.kc-add-sheet-header p {
    margin: 0;

    color: #8a959f;

    font-size: 12px;
}


.kc-add-close {
    width: 36px;
    height: 36px;

    border: none;

    border-radius: 50%;

    background: #f3f5f6;

    color: #667381;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;
}


/* =========================================
   ACTION ITEM
========================================= */

.kc-add-action {
    width: 100%;

    min-height: 68px;

    border: none;

    border-radius: 15px;

    background: transparent;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 10px 8px;

    text-align: left;

    cursor: pointer;

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

    transition:
        background 0.15s ease;
}


.kc-add-action:hover {
    background: #f5f8f8;
}


.kc-add-action:active {
    transform: scale(0.99);
}


/* =========================================
   ACTION ICON
========================================= */

.kc-add-action-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 13px;

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

    font-size: 21px;
}


.kc-add-photo-icon {
    background: #fff0f2;
}


.kc-add-file-icon {
    background: #eaf8f4;
}


.kc-add-note-icon {
    background: #f3ebff;
}


.kc-add-todo-icon {
    background: #eaf8f4;

    color: #15916f;

    font-size: 22px;

    font-weight: 700;
}


.kc-add-reminder-icon {
    background: #fff6df;
}


/* =========================================
   ACTION TEXT
========================================= */

.kc-add-action-text {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.kc-add-action-text strong {
    color: #172536;

    font-size: 15px;

    font-weight: 600;
}


.kc-add-action-text small {
    color: #8a959f;

    font-size: 12px;

    line-height: 1.3;
}


.kc-add-action-arrow {
    color: #9aa4ad;

    font-size: 25px;

    line-height: 1;
}


/* =========================================
   PREVENT PAGE SCROLL
========================================= */

body.kc-add-open {
    overflow: hidden;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .kc-bottom-nav {
        height: 86px;

        padding:
            0
            6px;
    }


    .kc-bottom-nav-item {
        height: 68px;

        font-size: 13px;
    }


    .kc-bottom-add {
        width: 72px;
        height: 72px;

        margin-top: -30px;

        font-size: 40px;
    }

}

/* =========================================
   PHOTO OPTIONS OVERLAY
========================================= */

.kc-photo-options-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: flex-end;

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.kc-photo-options-overlay.kc-photo-options-visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================
   SHEET
========================================= */

.kc-photo-options-sheet {
    width: 100%;

    background: #ffffff;

    border-radius: 28px 28px 0 0;

    padding:
        12px
        20px
        calc(24px + env(safe-area-inset-bottom));

    transform: translateY(100%);

    transition:
        transform 0.3s ease;

    box-sizing: border-box;
}


.kc-photo-options-visible
.kc-photo-options-sheet {
    transform: translateY(0);
}


/* =========================================
   HANDLE
========================================= */

.kc-sheet-handle {
    width: 42px;
    height: 5px;

    margin: 4px auto 22px;

    background: #d9dee3;

    border-radius: 999px;
}


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

.kc-photo-options-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.kc-photo-options-header h3 {
    margin: 0;

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

    font-size: 26px;
    font-weight: 700;

    color: #142033;
}


.kc-photo-options-header p {
    margin: 4px 0 0;

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

    font-size: 15px;

    color: #8a949f;
}


.kc-sheet-close {
    width: 46px;
    height: 46px;

    border: 0;
    border-radius: 50%;

    background: #f3f5f7;

    font-size: 28px;
    line-height: 1;

    color: #6f7b86;

    cursor: pointer;
}


/* =========================================
   OPTIONS
========================================= */

.kc-photo-options-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.kc-photo-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 16px;

    border: 0;
    border-radius: 20px;

    background: #f7f9fa;

    text-align: left;

    cursor: pointer;

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


.kc-photo-option:active {
    transform: scale(0.98);
}


/* =========================================
   ICON
========================================= */

.kc-photo-option-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    border-radius: 16px;

    font-size: 28px;
}


.kc-camera-icon {
    background: #fff0f0;
}


.kc-gallery-icon {
    background: #eaf8f4;
}


/* =========================================
   TEXT
========================================= */

.kc-photo-option-text {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.kc-photo-option-text strong {
    font-size: 17px;

    font-weight: 600;

    color: #172235;
}


.kc-photo-option-text small {
    font-size: 14px;

    line-height: 1.4;

    color: #89939e;
}


.kc-photo-option-arrow {
    font-size: 32px;

    color: #9ba5ad;

    line-height: 1;
}


/* =========================================
   PREVENT BACKGROUND SCROLL
========================================= */

body.kc-photo-options-open {
    overflow: hidden;
}

/* =========================================
   PHOTO DESTINATION SHEET
========================================= */

.kc-photo-destination-overlay {
    position: fixed;
    inset: 0;

    z-index: 10001;

    display: flex;
    align-items: flex-end;

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.kc-photo-destination-overlay.kc-photo-destination-visible {
    opacity: 1;
    visibility: visible;
}


.kc-photo-destination-sheet {
    width: 100%;

    background: #ffffff;

    border-radius: 28px 28px 0 0;

    padding:
        12px
        20px
        calc(24px + env(safe-area-inset-bottom));

    box-sizing: border-box;

    transform: translateY(100%);

    transition:
        transform 0.3s ease;
}


.kc-photo-destination-visible
.kc-photo-destination-sheet {
    transform: translateY(0);
}


/* HEADER */

.kc-photo-destination-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.kc-photo-destination-header h3 {
    margin: 0;

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

    font-size: 25px;

    font-weight: 700;

    color: #142033;
}


.kc-photo-destination-header p {
    margin: 4px 0 0;

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

    font-size: 14px;

    color: #89939e;
}


/* CLOSE */

.kc-sheet-close {
    width: 46px;
    height: 46px;

    border: none;

    border-radius: 50%;

    background: #f3f5f7;

    color: #6f7b86;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;
}


/* OPTIONS */

.kc-photo-destination-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.kc-photo-destination-option {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    border: none;

    border-radius: 20px;

    background: #f7f9fa;

    text-align: left;

    cursor: pointer;

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


.kc-photo-destination-option:active {
    transform: scale(0.98);
}


/* ICON */

.kc-destination-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;

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

    border-radius: 16px;

    font-size: 28px;
}


.kc-images-icon {
    background: #eaf8f4;
}


.kc-folder-icon {
    background: #fff6df;
}


/* TEXT */

.kc-destination-text {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.kc-destination-text strong {
    font-size: 17px;

    font-weight: 600;

    color: #172235;
}


.kc-destination-text small {
    font-size: 14px;

    line-height: 1.4;

    color: #89939e;
}


.kc-destination-arrow {
    font-size: 32px;

    color: #9ba5ad;

    line-height: 1;
}


/* =========================================
   FOLDER SELECTOR
========================================= */

.kc-folder-select-overlay {
    position: fixed;
    inset: 0;

    z-index: 10002;

    display: flex;
    align-items: flex-end;

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.kc-folder-select-overlay.kc-folder-select-visible {
    opacity: 1;
    visibility: visible;
}


.kc-folder-select-sheet {
    width: 100%;

    max-height: 80vh;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 28px 28px 0 0;

    padding:
        12px
        20px
        calc(24px + env(safe-area-inset-bottom));

    box-sizing: border-box;

    transform: translateY(100%);

    transition:
        transform 0.3s ease;
}


.kc-folder-select-visible
.kc-folder-select-sheet {
    transform: translateY(0);
}


/* HEADER */

.kc-folder-select-header {
    display: flex;

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

    margin-bottom: 18px;
}


.kc-folder-select-header h3 {
    margin: 0;

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

    font-size: 25px;

    font-weight: 700;

    color: #142033;
}


.kc-folder-select-header p {
    margin: 4px 0 0;

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

    font-size: 14px;

    color: #89939e;
}


/* FOLDER LIST */

.kc-folder-select-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* FOLDER */

.kc-folder-select-option {
    width: 100%;

    min-height: 66px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 10px 12px;

    border: none;

    border-radius: 16px;

    background: transparent;

    text-align: left;

    cursor: pointer;

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


.kc-folder-select-option:hover {
    background: #f5f8f8;
}


.kc-folder-select-option:active {
    transform: scale(0.99);
}


.kc-folder-select-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 13px;

    background: #fff6df;

    font-size: 24px;
}


.kc-folder-select-name {
    flex: 1;

    font-size: 16px;

    font-weight: 600;

    color: #172235;
}


.kc-folder-select-arrow {
    font-size: 28px;

    color: #9ba5ad;
}


.kc-no-folders {
    padding: 30px 10px;

    text-align: center;

    color: #89939e;

    font-size: 15px;
}


/* =========================================
   BODY LOCK
========================================= */

body.kc-photo-destination-open,
body.kc-folder-select-open {
    overflow: hidden;
}

/* =========================================
   PHOTO DESTINATION OVERLAY
========================================= */

.kc-photo-destination-overlay,
.kc-photo-folder-overlay {

    position: fixed;

    inset: 0;

    z-index: 10001;

    display: flex;

    align-items: flex-end;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.kc-photo-destination-overlay.kc-photo-destination-visible,
.kc-photo-folder-overlay.kc-photo-folder-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================
   SHEETS
========================================= */

.kc-photo-destination-sheet,
.kc-photo-folder-sheet {

    width: 100%;

    background: #ffffff;

    border-radius:
        28px
        28px
        0
        0;

    padding:
        12px
        20px
        calc(24px + env(safe-area-inset-bottom));

    box-sizing: border-box;

    transform: translateY(100%);

    transition:
        transform 0.3s ease;
}


.kc-photo-destination-visible
.kc-photo-destination-sheet,

.kc-photo-folder-visible
.kc-photo-folder-sheet {

    transform: translateY(0);
}


/* =========================================
   DESTINATION LIST
========================================= */

.kc-photo-destination-list {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* =========================================
   DESTINATION OPTION
========================================= */

.kc-photo-destination-option {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    border: 0;

    border-radius: 20px;

    background: #f7f9fa;

    text-align: left;

    cursor: pointer;

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

    transition:
        transform 0.12s ease,
        background 0.12s ease;
}


.kc-photo-destination-option:active {

    transform: scale(0.98);

    background: #eef4f2;
}


/* =========================================
   DESTINATION ICON
========================================= */

.kc-photo-destination-icon {

    width: 58px;

    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: #eaf8f4;

    font-size: 28px;
}


/* =========================================
   DESTINATION TEXT
========================================= */

.kc-photo-destination-text {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.kc-photo-destination-text strong {

    font-size: 17px;

    font-weight: 600;

    color: #172235;
}


.kc-photo-destination-text small {

    font-size: 14px;

    line-height: 1.4;

    color: #89939e;
}


/* =========================================
   FOLDER LIST
========================================= */

.kc-photo-folder-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    max-height: 55vh;

    overflow-y: auto;

    padding-bottom: 4px;
}


/* =========================================
   FOLDER OPTION
========================================= */

.kc-photo-folder-option {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 16px;

    border: 0;

    border-radius: 17px;

    background: #f7f9fa;

    text-align: left;

    cursor: pointer;

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

    transition:
        transform 0.12s ease,
        background 0.12s ease;
}


.kc-photo-folder-option:active {

    transform: scale(0.98);

    background: #eef4f2;
}


/* =========================================
   FOLDER ICON
========================================= */

.kc-photo-folder-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #fff6d9;

    font-size: 24px;
}


/* =========================================
   FOLDER NAME
========================================= */

.kc-photo-folder-name {

    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #172235;

    font-size: 16px;

    font-weight: 600;
}


/* =========================================
   EMPTY
========================================= */

.kc-photo-folder-empty {

    padding: 30px 15px;

    text-align: center;

    color: #89939e;

    font-size: 14px;
}