/* ══════════════════════════════════════
   NOTA — Premium UI System
   Bold • Glass • Gradient • Depth
══════════════════════════════════════ */

.app-shell {
    display: none !important;
}

/* ══════════════════════════════════════
   THEME TOKENS
══════════════════════════════════════ */

.nota, .nota.theme-dark {
    --n-bg: #06061a;
    --n-rail: #0d0b22;
    --n-rail-border: rgba(255,255,255,0.08);
    --n-nav: #1a1335;
    --n-nav-border: rgba(255,255,255,0.08);
    --n-main: #0f0e24;
    --n-main-grad: radial-gradient(ellipse 60% 45% at 0% 100%, rgba(108,92,231,0.06) 0%, transparent 60%), radial-gradient(ellipse 45% 40% at 100% 0%, rgba(167,139,250,0.04) 0%, transparent 55%);
    --n-glass: rgba(255,255,255,0.025);
    --n-glass-border: rgba(255,255,255,0.06);
    --n-glass-hover: rgba(255,255,255,0.05);
    --n-surface: rgba(255,255,255,0.05);
    --n-surface-hover: rgba(255,255,255,0.08);
    --n-surface-active: rgba(108,92,231,0.2);
    --n-border: rgba(255,255,255,0.08);
    --n-border-light: rgba(255,255,255,0.05);
    --n-text: #f4f3ff;
    --n-text-2: rgba(255,255,255,0.82);
    --n-text-3: rgba(255,255,255,0.5);
    --n-text-4: rgba(255,255,255,0.3);
    --n-text-muted: rgba(255,255,255,0.15);
    --n-accent: #6C5CE7;
    --n-accent-hover: #5A4BD6;
    --n-accent-dim: rgba(108,92,231,0.15);
    --n-accent-glow: rgba(108,92,231,0.3);
    --n-accent-text: #a78bfa;
    --n-accent-grad: linear-gradient(135deg, #6C5CE7 0%, #a78bfa 100%);
    --n-danger: #fca5a5;
    --n-danger-bg: rgba(239,68,68,0.15);
    --n-success: #6ee7b7;
    --n-badge-bg: #ef4444;
    --n-shadow: 0 20px 60px rgba(0,0,0,0.6);
    --n-shadow-sm: 0 2px 12px rgba(0,0,0,0.3);
    --n-topbar: #0d0b22;
    --n-tabbar: #0d0b22;
    --n-notif-bg: #1a1540;
    --n-notif-border: rgba(255,255,255,0.1);
    --n-card-border: rgba(255,255,255,0.06);
    --n-card-border-hover: rgba(108,92,231,0.3);
    --n-shared-bg: #1a1335;
    --n-overlay: rgba(0,0,0,0.6);
    --n-glow: 0 0 24px rgba(108,92,231,0.2);
    --n-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --n-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .nota.theme-light {
        --n-bg: #f2f3f8;
        --n-rail: rgba(255,255,255,0.9);
        --n-rail-border: rgba(0,0,0,0.06);
        --n-nav: rgba(255,255,255,0.85);
        --n-nav-border: rgba(0,0,0,0.06);
        --n-main: #edeef5;
        --n-main-grad: none;
        --n-glass: rgba(255,255,255,0.6);
        --n-glass-border: rgba(0,0,0,0.06);
        --n-glass-hover: rgba(0,0,0,0.03);
        --n-surface: rgba(0,0,0,0.03);
        --n-surface-hover: rgba(0,0,0,0.05);
        --n-surface-active: rgba(108,92,231,0.08);
        --n-border: rgba(0,0,0,0.07);
        --n-border-light: rgba(0,0,0,0.04);
        --n-text: #13132b;
        --n-text-2: #2a2a48;
        --n-text-3: #6b7280;
        --n-text-4: #9ca3af;
        --n-text-muted: #d1d5db;
        --n-accent: #6C5CE7;
        --n-accent-hover: #5A4BD6;
        --n-accent-dim: rgba(108,92,231,0.08);
        --n-accent-glow: rgba(108,92,231,0.1);
        --n-accent-text: #6C5CE7;
        --n-accent-grad: linear-gradient(135deg, #6C5CE7 0%, #a78bfa 100%);
        --n-danger: #dc2626;
        --n-danger-bg: rgba(239,68,68,0.08);
        --n-success: #059669;
        --n-badge-bg: #ef4444;
        --n-shadow: 0 12px 40px rgba(0,0,0,0.08);
        --n-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
        --n-topbar: rgba(255,255,255,0.9);
        --n-tabbar: rgba(255,255,255,0.92);
        --n-notif-bg: #fff;
        --n-notif-border: rgba(0,0,0,0.08);
        --n-card-border: rgba(0,0,0,0.06);
        --n-card-border-hover: rgba(108,92,231,0.2);
        --n-shared-bg: rgba(255,255,255,0.85);
        --n-overlay: rgba(0,0,0,0.25);
        --n-glow: none;
        --n-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        --n-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

/* ══════════════════════════════════════
   SHELL
══════════════════════════════════════ */

.nota {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--n-bg);
    font-family: var(--font);
    position: fixed;
    inset: 0;
    transition: background var(--n-transition);
}

/* ══════════════════════════════════════
   ICON RAIL — the spine
══════════════════════════════════════ */

.nota-rail {
    width: 72px;
    flex-shrink: 0;
    background: var(--n-rail);
    border-right: 1px solid var(--n-rail-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 16px;
    gap: 6px;
    z-index: 10;
    transition: background var(--n-transition);
}

.rail-brand {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 28px;
    padding: 0;
    border-radius: 14px;
    transition: all var(--n-spring);
    position: relative;
    overflow: hidden;
}

    .rail-brand img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 12px;
        pointer-events: none;
    }

    .rail-brand:hover {
        transform: scale(1.1) rotate(-4deg);
    }

    .rail-brand::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 18px;
        background: var(--n-accent-grad);
        opacity: 0;
        z-index: -1;
        transition: opacity 0.3s;
        filter: blur(10px);
    }

    .rail-brand:hover::after {
        opacity: 0.5;
    }

.rail-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rail-tab {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--n-text-4);
    font-size: 20px;
    transition: all var(--n-transition);
    position: relative;
}

    .rail-tab:hover {
        background: var(--n-surface-hover);
        color: var(--n-text-2);
        transform: translateY(-2px);
    }

    .rail-tab.active {
        background: var(--n-accent-dim);
        color: var(--n-accent-text);
        box-shadow: var(--n-glow);
    }

        .rail-tab.active::before {
            content: '';
            position: absolute;
            left: -12px;
            width: 4px;
            height: 20px;
            border-radius: 0 4px 4px 0;
            background: var(--n-accent-grad);
            box-shadow: 0 0 12px var(--n-accent-glow);
        }

.rail-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--n-badge-bg);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--n-rail);
    animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239,68,68,0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239,68,68,0);
    }
}

.rail-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.rail-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--n-border);
    padding: 0;
    background: none;
    margin-top: 12px;
    transition: all var(--n-spring);
}

    .rail-avatar:hover {
        border-color: var(--n-accent);
        transform: scale(1.1);
        box-shadow: var(--n-glow);
    }

    .rail-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .rail-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        border-radius: 50%;
    }

/* ══════════════════════════════════════
   NAV PANEL
══════════════════════════════════════ */

.nota-nav {
    width: 268px;
    flex-shrink: 0;
    background: var(--n-nav);
    border-right: 1px solid var(--n-nav-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background var(--n-transition);
}

.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 18px 18px;
    border-bottom: 1px solid var(--n-border);
    flex-shrink: 0;
}

.nav-header-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--n-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-back {
    font-size: 15px;
    font-weight: 700;
    color: var(--n-text);
    background: var(--n-surface);
    border: 1px solid var(--n-border);
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 10px;
    transition: all var(--n-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .nav-back:hover {
        color: var(--n-text);
        background: var(--n-surface-hover);
        border-color: var(--n-accent);
        transform: translateX(-2px);
    }

    .nav-back:active {
        transform: translateX(0);
    }

.nav-new-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--n-accent-grad);
    border: none;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px var(--n-accent-glow);
    transition: all var(--n-spring);
}

    .nav-new-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 24px var(--n-accent-glow);
    }

.nav-nb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--n-border-light);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.nav-nb-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.nav-nb-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--n-text);
    letter-spacing: -0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-nb-meta {
    font-size: 12px;
    color: var(--n-text-4);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-nb-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Compact action buttons so they fit on one row alongside the title */
.nav-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--n-surface);
    border: none;
    color: var(--n-text-3);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--n-spring);
    flex-shrink: 0;
}

    .nav-action-btn:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
        transform: scale(1.1);
    }

    .nav-action-btn.danger:hover {
        background: var(--n-danger-bg);
        color: var(--n-danger);
    }

/* On narrow widths, drop actions to a second row aligned right */
@media (max-width: 480px) {
    .nav-nb-header {
        padding: 12px 14px;
    }

    .nav-nb-actions {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }
}

.nav-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--n-border) transparent;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: all var(--n-transition);
    border: 1px solid transparent;
}

    .nav-item:hover {
        background: var(--n-surface-hover);
        transform: translateX(4px);
    }

    .nav-item.active {
        background: var(--n-surface-active);
        border-color: var(--n-card-border-hover);
        box-shadow: var(--n-glow);
    }

    .nav-item.notebook-item {
        padding: 16px;
        border: 1px solid var(--n-card-border);
        background: var(--n-glass);
        border-radius: 16px;
    }

        .nav-item.notebook-item:hover {
            border-color: var(--n-card-border-hover);
            background: var(--n-glass-hover);
            transform: translateX(6px);
        }

.nav-nb-dot {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.nav-item-body {
    flex: 1;
    min-width: 0;
}

.nav-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--n-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--n-transition);
}

.nav-item.active .nav-item-title {
    color: var(--n-text);
    font-weight: 700;
}

.nav-item-sub {
    font-size: 12px;
    color: var(--n-text-4);
    margin-top: 3px;
}

.nav-sec-bar {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.nav-item-count {
    font-size: 11px;
    background: var(--n-surface);
    color: var(--n-text-4);
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all var(--n-transition);
}

.nav-item.active .nav-item-count {
    background: var(--n-accent-dim);
    color: var(--n-accent-text);
}

.nav-item-delete {
    opacity: 0;
    width: 0;
    overflow: hidden;
    background: none;
    border: none;
    color: var(--n-text-4);
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.15s;
}

.nav-item:hover .nav-item-delete {
    opacity: 1;
    width: 20px;
}

.nav-item-delete:hover {
    color: var(--n-danger);
}

.nav-lock {
    font-size: 12px;
    opacity: 0.4;
    flex-shrink: 0;
}

.nav-chevron {
    color: var(--n-text-muted);
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.25s;
}

.nav-item:hover .nav-chevron {
    transform: translateX(4px);
    color: var(--n-text-4);
}

.nav-add-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--n-text-4);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    transition: all var(--n-transition);
    margin-top: 4px;
}

    .nav-add-btn:hover {
        color: var(--n-accent-text);
        background: var(--n-surface);
    }

.nav-error {
    margin: 10px 12px;
    padding: 10px 14px;
    background: var(--n-danger-bg);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 12px;
    color: var(--n-danger);
    font-size: 12px;
}

.nav-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--n-text-4);
    font-size: 13px;
}

/* ══════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════ */

.nota-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--n-main);
    min-width: 0;
    transition: background var(--n-transition);
}

.nota.desktop .nota-main {
    background-image: var(--n-main-grad);
}

.nota-content-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 50px;
    border-bottom: 1px solid var(--n-border);
    flex-shrink: 0;
    background: var(--n-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nota-body {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    inset: unset !important;
}

div.nota div.nota-main > div.nota-body {
    position: relative !important;
    inset: unset !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
}

/* ══════════════════════════════════════
   COMPACT: TOP BAR
══════════════════════════════════════ */

.nota-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    background: var(--n-topbar);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--n-border);
    flex-shrink: 0;
    z-index: 100;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-brand {
    font-size: 18px;
    font-weight: 800;
    color: var(--n-text);
    letter-spacing: -0.4px;
}

.topbar-brand-logo {
    height: 22px;
    width: auto;
    display: block;
}

.topbar-back {
    font-size: 26px;
    color: var(--n-text-3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: -8px;
}

.topbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--n-surface);
    border: 1px solid var(--n-border);
    color: var(--n-text-3);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all var(--n-transition);
}

    .topbar-btn:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

    .topbar-btn.has-notif {
        border-color: var(--n-accent);
        background: var(--n-accent-dim);
        box-shadow: var(--n-glow);
    }

.topbar-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--n-badge-bg);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--n-topbar);
}

/* ══════════════════════════════════════
   BOTTOM TAB BAR
══════════════════════════════════════ */

.nota-tabbar {
    display: flex;
    background: var(--n-tabbar);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--n-border);
    flex-shrink: 0;
    padding: 2px 0;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 0 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--n-text-4);
    transition: all var(--n-transition);
    position: relative;
}

    .tab-item:active {
        transform: scale(0.9);
    }

    .tab-item.active {
        color: var(--n-accent-text);
    }

        .tab-item.active::after {
            content: '';
            position: absolute;
            top: 0;
            width: 28px;
            height: 3px;
            border-radius: 0 0 3px 3px;
            background: var(--n-accent-grad);
            box-shadow: 0 2px 8px var(--n-accent-glow);
        }

.tab-icon {
    font-size: 20px;
    position: relative;
}

.tab-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tab-badge {
    position: absolute;
    top: -7px;
    right: -12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--n-badge-bg);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════
   MOBILE PANELS
══════════════════════════════════════ */

.nota-mobile-browser, .nota-mobile-shared {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--n-shared-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.shared-header {
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--n-border);
    font-size: 13px;
    font-weight: 800;
    color: var(--n-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shared-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--n-text-4);
    font-size: 13px;
    padding: 48px;
}

/* ══════════════════════════════════════
   NOTIFICATION OVERLAY
══════════════════════════════════════ */

.nota-notif-overlay {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: var(--n-overlay);
    backdrop-filter: blur(6px);
}

.nota-notif-panel {
    position: absolute;
    top: 64px;
    left: 88px;
    width: 420px;
    max-height: 70vh;
    background: var(--n-notif-bg);
    border: 1px solid var(--n-notif-border);
    border-radius: 22px;
    box-shadow: var(--n-shadow);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ══════════════════════════════════════
   COMPACT MODE
══════════════════════════════════════ */

.nota.compact {
    flex-direction: column;
}

    .nota.compact .nota-main {
        flex: 1;
        overflow: hidden;
        min-height: 0;
    }

    .nota.compact .nota-body {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    .nota.compact .nota-tabbar {
        flex-shrink: 0;
        z-index: 50;
    }

/* ══════════════════════════════════════
   DARK MODE — app component overrides
══════════════════════════════════════ */

.nota.theme-dark .home-card, .nota:not(.theme-light) .home-card {
    background: rgba(255,255,255,0.04) !important;
    border-top: 3px solid var(--card-accent, #6C5CE7) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 18px !important;
}

    /* Color cycling for cards — dark mode */
    .nota.theme-dark .home-card:nth-child(8n+1), .nota:not(.theme-light) .home-card:nth-child(8n+1) {
        --card-accent: #6C5CE7;
        background: linear-gradient(135deg, rgba(108,92,231,0.2) 0%, rgba(108,92,231,0.06) 100%) !important;
        border-left: 4px solid #6C5CE7 !important;
        border-top-color: #6C5CE7 !important;
    }

    .nota.theme-dark .home-card:nth-child(8n+2), .nota:not(.theme-light) .home-card:nth-child(8n+2) {
        --card-accent: #00b894;
        background: linear-gradient(135deg, rgba(0,184,148,0.2) 0%, rgba(0,184,148,0.06) 100%) !important;
        border-left: 4px solid #00b894 !important;
        border-top-color: #00b894 !important;
    }

    .nota.theme-dark .home-card:nth-child(8n+3), .nota:not(.theme-light) .home-card:nth-child(8n+3) {
        --card-accent: #e17055;
        background: linear-gradient(135deg, rgba(225,112,85,0.2) 0%, rgba(225,112,85,0.06) 100%) !important;
        border-left: 4px solid #e17055 !important;
        border-top-color: #e17055 !important;
    }

    .nota.theme-dark .home-card:nth-child(8n+4), .nota:not(.theme-light) .home-card:nth-child(8n+4) {
        --card-accent: #0984e3;
        background: linear-gradient(135deg, rgba(9,132,227,0.2) 0%, rgba(9,132,227,0.06) 100%) !important;
        border-left: 4px solid #0984e3 !important;
        border-top-color: #0984e3 !important;
    }

    .nota.theme-dark .home-card:nth-child(8n+5), .nota:not(.theme-light) .home-card:nth-child(8n+5) {
        --card-accent: #fdcb6e;
        background: linear-gradient(135deg, rgba(253,203,110,0.18) 0%, rgba(253,203,110,0.04) 100%) !important;
        border-left: 4px solid #fdcb6e !important;
        border-top-color: #fdcb6e !important;
    }

    .nota.theme-dark .home-card:nth-child(8n+6), .nota:not(.theme-light) .home-card:nth-child(8n+6) {
        --card-accent: #e84393;
        background: linear-gradient(135deg, rgba(232,67,147,0.2) 0%, rgba(232,67,147,0.06) 100%) !important;
        border-left: 4px solid #e84393 !important;
        border-top-color: #e84393 !important;
    }

    .nota.theme-dark .home-card:nth-child(8n+7), .nota:not(.theme-light) .home-card:nth-child(8n+7) {
        --card-accent: #00cec9;
        background: linear-gradient(135deg, rgba(0,206,201,0.2) 0%, rgba(0,206,201,0.06) 100%) !important;
        border-left: 4px solid #00cec9 !important;
        border-top-color: #00cec9 !important;
    }

    .nota.theme-dark .home-card:nth-child(8n+8), .nota:not(.theme-light) .home-card:nth-child(8n+8) {
        --card-accent: #a29bfe;
        background: linear-gradient(135deg, rgba(162,155,254,0.2) 0%, rgba(162,155,254,0.06) 100%) !important;
        border-left: 4px solid #a29bfe !important;
        border-top-color: #a29bfe !important;
    }

    .nota.theme-dark .home-card:hover, .nota:not(.theme-light) .home-card:hover {
        border-right-color: rgba(255,255,255,0.1) !important;
        border-bottom-color: rgba(255,255,255,0.1) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(var(--card-glow, 108,92,231),0.15) !important;
        transform: translateY(-4px) !important;
    }

.nota.theme-dark .home-card-title, .nota:not(.theme-light) .home-card-title {
    color: #f4f3ff !important;
}

.nota.theme-dark .home-card-crumb, .nota:not(.theme-light) .home-card-crumb {
    color: rgba(255,255,255,0.35) !important;
}

.nota.theme-dark .home-card-preview, .nota:not(.theme-light) .home-card-preview {
    color: rgba(255,255,255,0.5) !important;
}

.nota.theme-dark .home-card-date, .nota:not(.theme-light) .home-card-date {
    color: rgba(255,255,255,0.25) !important;
}

.nota.theme-dark .home-card-footer, .nota:not(.theme-light) .home-card-footer {
    border-top-color: rgba(255,255,255,0.05) !important;
}

/* ── Home grid: 2 columns ── */
.home-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}
    /* Inside the dual layout we want cards stacked vertically per column */
    .home-grid.home-grid-stack {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 10px !important;
    }

@media (max-width: 768px) {
    .home-grid:not(.home-grid-stack) {
        grid-template-columns: 1fr !important;
    }
}

.nota.theme-dark .home-section-title, .nota:not(.theme-light) .home-section-title {
    color: rgba(255,255,255,0.35) !important;
}

.nota.theme-dark .home-search-box, .nota:not(.theme-light) .home-search-box {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) !important;
}

    .nota.theme-dark .home-search-box:focus-within, .nota:not(.theme-light) .home-search-box:focus-within {
        border-color: rgba(108,92,231,0.5) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 3px rgba(108,92,231,0.15) !important;
    }

.nota.theme-dark .home-search-input, .nota:not(.theme-light) .home-search-input {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

    .nota.theme-dark .home-search-input::placeholder, .nota:not(.theme-light) .home-search-input::placeholder {
        color: rgba(255,255,255,0.3) !important;
    }

/* Dark notifications */
.nota.theme-dark .notif-item-title, .nota:not(.theme-light) .notif-item-title {
    color: rgba(255,255,255,0.7) !important;
}

    .nota.theme-dark .notif-item-title strong, .nota:not(.theme-light) .notif-item-title strong {
        color: #fff !important;
    }

.nota.theme-dark .notif-item-msg, .nota:not(.theme-light) .notif-item-msg {
    color: rgba(255,255,255,0.4) !important;
}

.nota.theme-dark .notif-item-meta, .nota:not(.theme-light) .notif-item-meta {
    color: rgba(255,255,255,0.3) !important;
}

.nota.theme-dark .notif-item, .nota:not(.theme-light) .notif-item {
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

.nota.theme-dark .notif-btn-dismiss, .nota:not(.theme-light) .notif-btn-dismiss {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.5) !important;
}

/* ══════════════════════════════════════
   MOBILE — section page
══════════════════════════════════════ */

@media (max-width: 1024px) {
    body.is-mobile .main-content {
        all: unset !important;
    }

    .nota.compact {
        height: 100vh !important;
        height: 100dvh !important;
    }

        .nota.compact .nota-body .home-body {
            padding: 16px 14px 32px !important;
        }

        .nota.compact .nota-body .home-grid:not(.home-grid-stack) {
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
        }

        .nota.compact .nota-body .home-card {
            width: 100% !important;
            max-width: 100% !important;
        }

        .nota.compact .nota-body .home-hero {
            padding: 16px !important;
            border-radius: 0 !important;
        }

        .nota.compact .fnote {
            display: none !important;
        }

        .nota.compact .section-page, .nota.compact .nota-body .section-page {
            flex-direction: column !important;
            height: 100% !important;
            overflow: hidden !important;
        }

        .nota.compact .notes-panel, .nota.compact .nota-body .notes-panel, body.is-mobile .notes-panel {
            width: 100% !important;
            min-width: 100% !important;
            height: auto !important;
            max-height: none !important;
            flex-shrink: 0 !important;
            border-right: none !important;
            border-bottom: 1px solid var(--n-border) !important;
            overflow: hidden !important;
        }

        /* On mobile, when no note is selected, show the notes list as the FULL screen.
       When a note is selected, hide the list and show only the editor. */
        .nota.compact .section-page:not(.has-active-note) .notes-panel,
        body.is-mobile .section-page:not(.has-active-note) .notes-panel {
            height: 100% !important;
            flex: 1 !important;
            border-bottom: none !important;
        }

        .nota.compact .section-page:not(.has-active-note) .notes-list,
        .nota.compact .section-page:not(.has-active-note) .notes-search,
        body.is-mobile .section-page:not(.has-active-note) .notes-list,
        body.is-mobile .section-page:not(.has-active-note) .notes-search {
            display: block !important;
            height: auto !important;
        }

        .nota.compact .section-page:not(.has-active-note) .editor-panel,
        body.is-mobile .section-page:not(.has-active-note) .editor-panel {
            display: none !important;
        }

        /* When a note IS active on mobile: hide list, full editor */
        .nota.compact .section-page.has-active-note .notes-list,
        .nota.compact .section-page.has-active-note .notes-search,
        body.is-mobile .section-page.has-active-note .notes-list,
        body.is-mobile .section-page.has-active-note .notes-search {
            display: none !important;
            height: 0 !important;
            overflow: hidden !important;
        }

        .nota.compact .notes-panel-header, body.is-mobile .notes-panel-header {
            padding: 8px 14px !important;
            border-bottom: none !important;
        }

        .nota.compact .editor-panel, body.is-mobile .editor-panel {
            flex: 1 !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

        .nota.compact .editor-toolbar, body.is-mobile .editor-toolbar {
            padding: 0 12px !important;
            height: 40px !important;
        }

        .nota.compact .editor-body, body.is-mobile .editor-body {
            padding: 12px 14px !important;
            margin: 0 !important;
            max-width: 100% !important;
        }

        .nota.compact .editor-title-input {
            font-size: 22px !important;
        }

        .nota.compact .ql-toolbar.ql-snow, body.is-mobile .ql-toolbar.ql-snow {
            padding: 4px 6px !important;
            margin-bottom: 8px !important;
        }
}

/* ══════════════════════════════════════
   LIGHT THEME — inner pages
══════════════════════════════════════ */

.nota.theme-light .home-animated-bg {
    background: #edeef5 !important;
    background-image: none !important;
}

.nota.theme-light .home-hero {
    background: #fff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
}

.nota.theme-light .home-hero-name {
    color: #13132b !important;
}

.nota.theme-light .home-hero-stat {
    color: #6b7280 !important;
}

.nota.theme-light .home-hero-dot {
    color: #d1d5db !important;
}

.nota.theme-light .home-avatar {
    border-color: #e5e7eb !important;
}

.nota.theme-light .home-search-box {
    background: #f2f3f8 !important;
    box-shadow: none !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 14px !important;
}

    .nota.theme-light .home-search-box:focus-within {
        border-color: #6C5CE7 !important;
        box-shadow: 0 0 0 3px rgba(108,92,231,0.1) !important;
    }

.nota.theme-light .home-search-input {
    background: transparent !important;
    color: #13132b !important;
    border: none !important;
    box-shadow: none !important;
}

    .nota.theme-light .home-search-input::placeholder {
        color: #9ca3af !important;
    }

.nota.theme-light .home-body {
    background: transparent !important;
}

.nota.theme-light .home-section-title {
    color: #6b7280 !important;
}

.nota.theme-light .home-card {
    background: #fff !important;
    border-top: 3px solid var(--card-accent, #6C5CE7) !important;
    border-right: 1px solid #edeef3 !important;
    border-bottom: 1px solid #edeef3 !important;
    border-left: 3px solid rgba(108,92,231,0.15) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    border-radius: 18px !important;
}

    .nota.theme-light .home-card:nth-child(8n+1) {
        --card-accent: #6C5CE7;
        background: linear-gradient(135deg, rgba(108,92,231,0.1) 0%, rgba(108,92,231,0.02) 100%) !important;
        border-left-color: #6C5CE7 !important;
    }

    .nota.theme-light .home-card:nth-child(8n+2) {
        --card-accent: #00b894;
        background: linear-gradient(135deg, rgba(0,184,148,0.1) 0%, rgba(0,184,148,0.02) 100%) !important;
        border-left-color: #00b894 !important;
    }

    .nota.theme-light .home-card:nth-child(8n+3) {
        --card-accent: #e17055;
        background: linear-gradient(135deg, rgba(225,112,85,0.1) 0%, rgba(225,112,85,0.02) 100%) !important;
        border-left-color: #e17055 !important;
    }

    .nota.theme-light .home-card:nth-child(8n+4) {
        --card-accent: #0984e3;
        background: linear-gradient(135deg, rgba(9,132,227,0.1) 0%, rgba(9,132,227,0.02) 100%) !important;
        border-left-color: #0984e3 !important;
    }

    .nota.theme-light .home-card:nth-child(8n+5) {
        --card-accent: #f39c12;
        background: linear-gradient(135deg, rgba(243,156,18,0.1) 0%, rgba(243,156,18,0.02) 100%) !important;
        border-left-color: #f39c12 !important;
    }

    .nota.theme-light .home-card:nth-child(8n+6) {
        --card-accent: #e84393;
        background: linear-gradient(135deg, rgba(232,67,147,0.1) 0%, rgba(232,67,147,0.02) 100%) !important;
        border-left-color: #e84393 !important;
    }

    .nota.theme-light .home-card:nth-child(8n+7) {
        --card-accent: #00cec9;
        background: linear-gradient(135deg, rgba(0,206,201,0.1) 0%, rgba(0,206,201,0.02) 100%) !important;
        border-left-color: #00cec9 !important;
    }

    .nota.theme-light .home-card:nth-child(8n+8) {
        --card-accent: #a29bfe;
        background: linear-gradient(135deg, rgba(162,155,254,0.1) 0%, rgba(162,155,254,0.02) 100%) !important;
        border-left-color: #a29bfe !important;
    }

    .nota.theme-light .home-card:hover {
        border-right-color: #dfe0ea !important;
        border-bottom-color: #dfe0ea !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
        transform: translateY(-4px) !important;
    }

.nota.theme-light .home-card-title {
    color: #13132b !important;
}

.nota.theme-light .home-card-crumb {
    color: #9ca3af !important;
}

.nota.theme-light .home-card-preview {
    color: #6b7280 !important;
}

.nota.theme-light .home-card-date {
    color: #9ca3af !important;
}

.nota.theme-light .nota-main {
    background: #edeef5 !important;
    background-image: none !important;
}

/* Section page */
.nota.theme-light .notes-panel {
    background: #f5f6fc !important;
    border-right: 1px solid #e8eaf0 !important;
}

.nota.theme-light .notes-panel-header {
    background: #eef0fa !important;
    border-bottom-color: #dfe2ec !important;
}

.nota.theme-light .notes-panel-title {
    color: #13132b !important;
}

.nota.theme-light .note-count {
    background: #e8ebf7 !important;
    color: #6b7280 !important;
}

.nota.theme-light .search-input {
    background: #fff !important;
    border-color: #dfe2ec !important;
    color: #13132b !important;
}

    .nota.theme-light .search-input:focus {
        border-color: #6C5CE7 !important;
        box-shadow: 0 0 0 3px rgba(108,92,231,0.08) !important;
    }

.nota.theme-light .note-card {
    background: #fff !important;
    border: 1px solid #e8eaf0 !important;
}

    .nota.theme-light .note-card:hover {
        border-color: #c7d2fe !important;
        box-shadow: 0 2px 8px rgba(108,92,231,0.06) !important;
    }

    .nota.theme-light .note-card.active {
        background: #f0eeff !important;
        border-color: rgba(108,92,231,0.3) !important;
    }

.nota.theme-light .note-card-title {
    color: #13132b !important;
}

.nota.theme-light .note-card-preview {
    color: #6b7280 !important;
}

/* Editor */
.nota.theme-light .editor-panel {
    background: #fff !important;
}

.nota.theme-light .editor-toolbar {
    background: #fafbff !important;
    border-bottom-color: #e8eaf0 !important;
}

.nota.theme-light .editor-title-input {
    color: #13132b !important;
}

    .nota.theme-light .editor-title-input::placeholder {
        color: #d1d5db !important;
    }

.nota.theme-light .icon-btn {
    color: #6b7280 !important;
}

    .nota.theme-light .icon-btn:hover {
        background: #f0f1f5 !important;
        color: #374151 !important;
    }

.nota.theme-light .save-indicator.saved {
    color: #059669 !important;
    background: rgba(16,185,129,0.08) !important;
}

/* Quill */
.nota.theme-light .ql-toolbar.ql-snow {
    background: #f8f9fc !important;
    border-color: #e8eaf0 !important;
}

.nota.theme-light .ql-snow .ql-stroke {
    stroke: #6b7280 !important;
}

.nota.theme-light .ql-snow .ql-fill {
    fill: #6b7280 !important;
}

.nota.theme-light .ql-snow .ql-picker-label {
    color: #6b7280 !important;
}

.nota.theme-light .ql-toolbar.ql-snow button:hover .ql-stroke, .nota.theme-light .ql-toolbar.ql-snow .ql-active .ql-stroke {
    stroke: #6C5CE7 !important;
}

.nota.theme-light .ql-toolbar.ql-snow button:hover .ql-fill, .nota.theme-light .ql-toolbar.ql-snow .ql-active .ql-fill {
    fill: #6C5CE7 !important;
}

.nota.theme-light .ql-toolbar.ql-snow button:hover, .nota.theme-light .ql-toolbar.ql-snow .ql-active {
    background: rgba(108,92,231,0.08) !important;
}

.nota.theme-light .ql-editor {
    color: #13132b !important;
    background-image: repeating-linear-gradient(180deg, transparent 0px, transparent 27px, rgba(0,0,0,0.04) 27px, rgba(0,0,0,0.04) 28px) !important;
}

/* Notifications */
.nota.theme-light .notif-item {
    border-bottom-color: #f0f1f7 !important;
}

    .nota.theme-light .notif-item:hover {
        background: #f9fafb !important;
    }

.nota.theme-light .notif-item-title {
    color: #374151 !important;
}

    .nota.theme-light .notif-item-title strong {
        color: #13132b !important;
    }

.nota.theme-light .notif-item-msg {
    color: #6b7280 !important;
}

.nota.theme-light .btn-new-note {
    background: var(--n-accent-grad) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(108,92,231,0.3) !important;
}

.nota.theme-light ::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
}

/* ══════════════════════════════════════
   SETTINGS PANEL — NUCLEAR FIX
   These work regardless of theme since
   the settings modal is always dark bg
══════════════════════════════════════ */

/* The settings modal is always dark-styled */
.sp-overlay .sp-modal {
    background: #221f48 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #f4f3ff !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5) !important;
}

.sp-overlay .sp-nav {
    background: #1a1740 !important;
    border-right-color: rgba(255,255,255,0.08) !important;
}

.sp-overlay .sp-content {
    background: #221f48 !important;
}

.sp-overlay .sp-content-header h2 {
    color: #f4f3ff !important;
}

.sp-overlay .sp-close {
    color: rgba(255,255,255,0.5) !important;
}

.sp-overlay .sp-nav-name {
    color: #f4f3ff !important;
}

.sp-overlay .sp-tab {
    color: rgba(255,255,255,0.55) !important;
}

    .sp-overlay .sp-tab.active {
        color: #f4f3ff !important;
        background: rgba(108,92,231,0.2) !important;
    }

    .sp-overlay .sp-tab:hover {
        color: rgba(255,255,255,0.85) !important;
        background: rgba(255,255,255,0.06) !important;
    }

/* ALL inputs in the settings modal */
.sp-overlay input.sp-input,
.sp-modal input.sp-input,
input.sp-input {
    color: #f4f3ff !important;
    -webkit-text-fill-color: #f4f3ff !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

    /* DISABLED inputs — the key fix */
    .sp-overlay input.sp-input[disabled],
    .sp-modal input.sp-input[disabled],
    input.sp-input[disabled],
    input.sp-input:disabled {
        color: rgba(255,255,255,0.5) !important;
        -webkit-text-fill-color: rgba(255,255,255,0.5) !important;
        background: rgba(255,255,255,0.03) !important;
        opacity: 1 !important;
    }

    input.sp-input::placeholder {
        color: rgba(255,255,255,0.25) !important;
        -webkit-text-fill-color: rgba(255,255,255,0.25) !important;
    }

    input.sp-input:focus {
        border-color: #6C5CE7 !important;
        box-shadow: 0 0 0 3px rgba(108,92,231,0.15) !important;
    }

/* Labels */
.sp-overlay .sp-field label,
.sp-modal .sp-field label {
    color: rgba(255,255,255,0.5) !important;
}

.sp-overlay .sp-section-label,
.sp-modal .sp-section-label {
    color: #a78bfa !important;
}

/* Account info */
.sp-overlay .sp-info-label {
    color: rgba(255,255,255,0.4) !important;
}

.sp-overlay .sp-info-value {
    color: rgba(255,255,255,0.8) !important;
}

/* Upload button */
.sp-overlay .sp-btn-upload {
    color: #f4f3ff !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.sp-overlay .sp-color-row span {
    color: rgba(255,255,255,0.5) !important;
}

/* Save button */
.sp-overlay .sp-save-btn {
    background: linear-gradient(135deg, #6C5CE7, #a78bfa) !important;
    color: #fff !important;
}

/* Status */
.sp-overlay .sp-success {
    color: #6ee7b7 !important;
}

.sp-overlay .sp-error {
    color: #fca5a5 !important;
}

/* Logout button */
.sp-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin-top: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fca5a5;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border-radius: 10px;
    transition: background 0.12s;
}

    .sp-logout-btn:hover {
        background: rgba(239,68,68,0.15);
    }

/* Settings — LIGHT MODE overrides */
.nota.theme-light .sp-overlay .sp-modal {
    background: #fff !important;
    border-color: #e0e2ec !important;
    color: #13132b !important;
}

.nota.theme-light .sp-overlay .sp-nav {
    background: #f5f6fc !important;
    border-right-color: #e0e2ec !important;
}

.nota.theme-light .sp-overlay .sp-content {
    background: #fff !important;
}

.nota.theme-light .sp-overlay .sp-content-header h2 {
    color: #13132b !important;
}

.nota.theme-light .sp-overlay .sp-close {
    color: #6b7280 !important;
}

.nota.theme-light .sp-overlay .sp-nav-name {
    color: #13132b !important;
}

.nota.theme-light .sp-overlay .sp-tab {
    color: #6b7280 !important;
}

    .nota.theme-light .sp-overlay .sp-tab.active {
        color: #13132b !important;
        background: rgba(108,92,231,0.08) !important;
    }

    .nota.theme-light .sp-overlay .sp-tab:hover {
        color: #374151 !important;
        background: rgba(0,0,0,0.03) !important;
    }

.nota.theme-light .sp-overlay input.sp-input,
.nota.theme-light input.sp-input {
    color: #13132b !important;
    -webkit-text-fill-color: #13132b !important;
    background: #f2f3f8 !important;
    border-color: #d8dce8 !important;
}

    .nota.theme-light .sp-overlay input.sp-input[disabled],
    .nota.theme-light input.sp-input[disabled],
    .nota.theme-light input.sp-input:disabled {
        color: #6b7280 !important;
        -webkit-text-fill-color: #6b7280 !important;
        background: #f0f1f5 !important;
        opacity: 1 !important;
    }

    .nota.theme-light input.sp-input::placeholder {
        color: #9ca3af !important;
        -webkit-text-fill-color: #9ca3af !important;
    }

    .nota.theme-light input.sp-input:focus {
        border-color: #6C5CE7 !important;
        box-shadow: 0 0 0 3px rgba(108,92,231,0.1) !important;
    }

.nota.theme-light .sp-overlay .sp-field label {
    color: #6b7280 !important;
}

.nota.theme-light .sp-overlay .sp-section-label {
    color: #6C5CE7 !important;
}

.nota.theme-light .sp-overlay .sp-info-label {
    color: #9ca3af !important;
}

.nota.theme-light .sp-overlay .sp-info-value {
    color: #374151 !important;
}

.nota.theme-light .sp-overlay .sp-btn-upload {
    color: #374151 !important;
    background: #f2f3f8 !important;
    border-color: #d8dce8 !important;
}

.nota.theme-light .sp-overlay .sp-color-row span {
    color: #6b7280 !important;
}

.nota.theme-light .sp-overlay .sp-save-btn {
    background: linear-gradient(135deg,#6C5CE7,#a78bfa) !important;
    color: #fff !important;
}

.nota.theme-light .sp-logout-btn {
    color: #dc2626 !important;
}

    .nota.theme-light .sp-logout-btn:hover {
        background: rgba(239,68,68,0.06) !important;
    }

/* Admin user management */
.sp-user-card {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
}

    .sp-user-card:hover {
        border-color: rgba(255,255,255,0.1);
    }

.sp-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    transition: background 0.12s;
}

    .sp-user-row:hover {
        background: rgba(255,255,255,0.06);
    }

.sp-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

    .sp-user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .sp-user-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        border-radius: 50%;
    }

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

.sp-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #f4f3ff;
}

.sp-user-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-user-role {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(108,92,231,0.15);
    color: #a78bfa;
    flex-shrink: 0;
}

.sp-user-edit {
    padding: 14px 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}

.nota.theme-light .sp-user-card {
    border-color: #e0e2ec;
}

    .nota.theme-light .sp-user-card:hover {
        border-color: #c7d2fe;
    }

.nota.theme-light .sp-user-row {
    background: #f8f9fc;
}

    .nota.theme-light .sp-user-row:hover {
        background: #edeef5;
    }

.nota.theme-light .sp-user-name {
    color: #13132b;
}

.nota.theme-light .sp-user-meta {
    color: #9ca3af;
}

.nota.theme-light .sp-user-role {
    background: rgba(108,92,231,0.08);
    color: #6C5CE7;
}

.nota.theme-light .sp-user-edit {
    border-top-color: #e0e2ec;
    background: #fafbff;
}

.nota.theme-light .sp-overlay select.sp-input {
    color: #13132b !important;
    -webkit-text-fill-color: #13132b !important;
    background: #f2f3f8 !important;
}

select.sp-input {
    color: #f4f3ff !important;
    -webkit-text-fill-color: #f4f3ff !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* Nav share button */
.nav-share-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n-text-4);
    opacity: 0;
    flex-shrink: 0;
    transition: all 0.15s;
}

.nav-item:hover .nav-share-btn {
    opacity: 1;
}

.nav-share-btn:hover {
    background: var(--n-surface-hover);
    color: var(--n-accent-text);
    transform: scale(1.1);
}

/* ── Note collaborator avatars ── */
.collab-stack {
    display: inline-flex;
    align-items: center;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--n-border);
}

.collab-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-left: -10px;
    overflow: hidden;
    border: 2px solid var(--n-bg, #0f0d26);
    background: var(--n-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, z-index 0s;
    position: relative;
    z-index: 1;
}

    .collab-avatar:first-child {
        margin-left: 0;
    }

    .collab-avatar:hover {
        transform: translateY(-2px) scale(1.1);
        z-index: 10;
    }

    .collab-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .collab-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
    }

    .collab-avatar.active {
        border-color: #6ee7b7;
        box-shadow: 0 0 0 2px rgba(110,231,183,0.3);
    }

    .collab-avatar.collab-more {
        background: var(--n-surface-hover);
        color: var(--n-text-3);
        font-size: 12px;
        font-weight: 700;
    }

.nota.theme-light .collab-avatar {
    border-color: #fff;
}

/* ══════════════════════════════════════
   TIPTAP EDITOR
══════════════════════════════════════ */

.tiptap-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 60px 80px 24px;
    min-height: 400px;
}

    .tiptap-container .ProseMirror {
        outline: none;
        min-height: 100%;
        color: var(--n-text);
        line-height: 1.7;
        font-size: 15px;
    }

        .tiptap-container .ProseMirror > * + * {
            margin-top: 0.75em;
        }

        .tiptap-container .ProseMirror h1 {
            font-size: 28px;
            font-weight: 800;
            line-height: 1.2;
            margin-top: 1.2em;
        }

        .tiptap-container .ProseMirror h2 {
            font-size: 22px;
            font-weight: 700;
            line-height: 1.3;
            margin-top: 1em;
        }

        .tiptap-container .ProseMirror h3 {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.4;
        }

        .tiptap-container .ProseMirror p {
            margin: 0;
        }

        .tiptap-container .ProseMirror ul, .tiptap-container .ProseMirror ol {
            padding-left: 24px;
        }

        .tiptap-container .ProseMirror ul {
            list-style: disc;
        }

        .tiptap-container .ProseMirror ol {
            list-style: decimal;
        }

        .tiptap-container .ProseMirror li > p {
            margin: 0;
        }

        .tiptap-container .ProseMirror blockquote {
            border-left: 3px solid var(--n-accent);
            padding-left: 14px;
            color: var(--n-text-3);
            font-style: italic;
        }

        .tiptap-container .ProseMirror code {
            background: var(--n-surface);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: ui-monospace, monospace;
            font-size: 0.92em;
        }

        .tiptap-container .ProseMirror pre {
            background: var(--n-surface);
            padding: 12px 14px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: ui-monospace, monospace;
            font-size: 13px;
        }

            .tiptap-container .ProseMirror pre code {
                background: none;
                padding: 0;
            }

        .tiptap-container .ProseMirror img {
            max-width: 100%;
            border-radius: 8px;
            margin: 8px 0;
        }

        .tiptap-container .ProseMirror a {
            color: var(--n-accent-text);
            text-decoration: underline;
            cursor: pointer;
        }

        .tiptap-container .ProseMirror p.is-editor-empty:first-child::before {
            content: attr(data-placeholder);
            float: left;
            color: var(--n-text-4);
            pointer-events: none;
            height: 0;
        }

/* TipTap toolbar */
.tt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--n-border);
    background: var(--n-glass);
    flex-shrink: 0;
}

.tt-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--n-text-2);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

    .tt-btn:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

    .tt-btn:active {
        transform: scale(0.95);
    }

    .tt-btn.active {
        background: var(--n-accent-dim);
        color: var(--n-accent-text);
        border-color: var(--n-accent);
    }

.tt-sep {
    width: 1px;
    height: 18px;
    background: var(--n-border);
    margin: 0 4px;
}

.nota.theme-light .tiptap-container .ProseMirror code,
.nota.theme-light .tiptap-container .ProseMirror pre {
    background: #f0f1f5;
    color: #1a1a2e;
}

.nota.theme-light .tt-btn {
    color: #374151;
}

    .nota.theme-light .tt-btn:hover {
        background: #f0f1f5;
        color: #111827;
    }

/* ── Per-block author avatars (TipTap) — right gutter, uniform ── */
.tiptap-container .ProseMirror [data-author-id] {
    position: relative;
}

    .tiptap-container .ProseMirror [data-author-id]::before {
        content: attr(data-author-initials);
        position: absolute;
        right: -42px;
        top: 0.15em;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--author-color, #6C5CE7);
        color: white;
        font-size: 9px;
        font-weight: 700;
        font-family: 'Plus Jakarta Sans', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        pointer-events: none;
        user-select: none;
        box-shadow: 0 0 0 2px var(--n-bg, #0f0d26);
        z-index: 1;
        text-transform: uppercase;
        letter-spacing: 0;
    }
/* Suppress duplicate marker on paragraphs nested inside list items */
.tiptap-container .ProseMirror li > p[data-author-id]::before {
    display: none;
}
/* Light mode adjustments */
.nota.theme-light .tiptap-container .ProseMirror [data-author-id]::before {
    box-shadow: 0 0 0 2px #fff;
}

/* ══════════════════════════════════════
   EXCALIDRAW MODAL
══════════════════════════════════════ */
.exc-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: excFadeIn 0.18s ease-out;
}

@keyframes excFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.exc-modal {
    width: 95vw;
    height: 92vh;
    background: var(--n-bg, #15132e);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    border: 1px solid var(--n-border);
}

.exc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    flex-shrink: 0;
    background: var(--n-glass);
    border-bottom: 1px solid var(--n-border);
}

.exc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--n-text);
}

.exc-actions {
    display: flex;
    gap: 8px;
}

.exc-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--n-border);
    background: var(--n-surface);
    color: var(--n-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

    .exc-btn:hover {
        background: var(--n-surface-hover);
    }

    .exc-btn.exc-primary {
        background: linear-gradient(135deg, #6C5CE7 0%, #a855f7 100%);
        border-color: transparent;
        color: #fff;
    }

        .exc-btn.exc-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(108,92,231,0.35);
        }

.exc-mount {
    flex: 1;
    min-height: 0;
    position: relative;
}

    .exc-mount .excalidraw {
        height: 100%;
    }

/* ══════════════════════════════════════
   SLASH COMMAND MENU
══════════════════════════════════════ */
.tt-slash-menu {
    position: absolute;
    z-index: 99999;
    width: 280px;
    max-height: 360px;
    overflow-y: auto;
    background: #1a1739;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: ttSlashIn 0.12s ease-out;
}

@keyframes ttSlashIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tt-slash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: #e8e8f0;
    transition: background 0.1s;
}

    .tt-slash-item:hover, .tt-slash-item.selected {
        background: rgba(255,255,255,0.08);
    }

.tt-slash-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #c5c5d2;
    flex-shrink: 0;
}

.tt-slash-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tt-slash-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.tt-slash-subtitle {
    font-size: 11px;
    color: #8b8ba0;
    margin-top: 1px;
}

.tt-slash-empty {
    padding: 16px;
    text-align: center;
    color: #8b8ba0;
    font-size: 12px;
}

/* ══════════════════════════════════════
   BUBBLE MENU
══════════════════════════════════════ */
.tt-bubble-menu {
    position: absolute;
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px;
    background: #1a1739;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    animation: ttBubbleIn 0.12s ease-out;
}

@keyframes ttBubbleIn {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tt-bubble-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #c5c5d2;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

    .tt-bubble-btn:hover {
        background: rgba(255,255,255,0.08);
        color: #fff;
    }

    .tt-bubble-btn.active {
        background: rgba(108,92,231,0.25);
        color: #c4b5fd;
    }

.tt-bubble-sep {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.12);
    margin: 0 2px;
}

/* Light mode overrides */
.nota.theme-light .tt-slash-menu {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.nota.theme-light .tt-slash-item {
    color: #1a1a2e;
}

    .nota.theme-light .tt-slash-item:hover, .nota.theme-light .tt-slash-item.selected {
        background: #f0f1f5;
    }

.nota.theme-light .tt-slash-icon {
    background: #f5f5f9;
    border-color: rgba(0,0,0,0.06);
    color: #4a4a5e;
}

.nota.theme-light .tt-slash-title {
    color: #111827;
}

.nota.theme-light .tt-slash-subtitle {
    color: #6b7280;
}

.nota.theme-light .tt-bubble-menu {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.nota.theme-light .tt-bubble-btn {
    color: #4a4a5e;
}

    .nota.theme-light .tt-bubble-btn:hover {
        background: #f0f1f5;
        color: #111827;
    }

.nota.theme-light .tt-bubble-sep {
    background: rgba(0,0,0,0.1);
}

/* ── Settings → Users tab ── */
.sp-user-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-user-row {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
}

.sp-user-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

    .sp-user-row-head:hover {
        background: rgba(255,255,255,0.06);
    }

.sp-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sp-user-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.sp-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #f4f3ff;
}

.sp-user-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 1px;
}

.sp-role-badge {
    background: rgba(108,92,231,0.25);
    color: #c4b5fd;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sp-chev {
    color: rgba(255,255,255,0.4);
    font-size: 16px;
    flex-shrink: 0;
}

.sp-user-row-body {
    padding: 14px;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Icon rail copyright */
.rail-copyright {
    margin-top: 8px;
    padding: 6px 0;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
    text-align: center;
    letter-spacing: 0.05em;
    user-select: none;
}

.nota.theme-light .rail-copyright {
    color: rgba(0,0,0,0.3);
}

/* Settings sidebar copyright */
.sp-copyright {
    margin-top: auto;
    padding: 16px 18px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sp-copyright-text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.45) !important;
    letter-spacing: 0.04em;
}

.sp-copyright-logo {
    height: 28px;
    width: auto;
    opacity: 0.95;
    transition: opacity 0.15s;
}

    .sp-copyright-logo:hover {
        opacity: 1;
    }

.nota.theme-light .sp-copyright-text {
    color: rgba(0,0,0,0.5) !important;
}

/* PNG icons in the rail */
.rail-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.rail-tab:hover .rail-icon {
    opacity: 1;
    transform: scale(1.05);
}

.rail-tab.active .rail-icon {
    opacity: 1;
}

/* PNG icons in mobile bottom tabbar */
.tab-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.15s;
    pointer-events: none;
    display: inline-block;
    vertical-align: middle;
}

.tab-item.active .tab-img,
.tab-item:hover .tab-img {
    opacity: 1;
}

/* ============================================================
   MOBILE LAYOUT IMPROVEMENTS (Slack-style header, dual columns)
   ============================================================ */

/* Theme + logout buttons in the home hero, top-right */
.home-hero-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.home-hero-action {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    backdrop-filter: blur(8px);
    color: var(--n-text);
}

    .home-hero-action:hover {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.2);
    }

    .home-hero-action:active {
        transform: scale(0.94);
    }

    .home-hero-action img {
        width: 20px;
        height: 20px;
        opacity: 0.85;
        pointer-events: none;
    }

    .home-hero-action.danger:hover {
        background: rgba(239,68,68,0.18);
        border-color: rgba(239,68,68,0.4);
    }

.nota.theme-light .home-hero-action {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}

    .nota.theme-light .home-hero-action:hover {
        background: rgba(0,0,0,0.08);
    }
/* Hide on desktop — rail already has theme toggle and avatar logout */
.nota.desktop .home-hero-actions {
    display: none;
}

/* Slack-style mobile header — pull content up under the status bar */
.nota.compact .home-page,
.nota.compact .home-content {
    padding-top: max(12px, env(safe-area-inset-top));
}

.nota.compact .home-hero {
    padding-top: 14px !important;
    margin-top: 0 !important;
    /* When topbar is hidden on mobile home, give status-bar clearance */
    padding-top: max(14px, calc(env(safe-area-inset-top) + 8px)) !important;
}

.nota.compact .home-search-outer {
    margin-top: 12px !important;
}

/* Dual-column Recent + Pinned on mobile (and desktop) */
.home-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.home-dual-col {
    min-width: 0;
}

    .home-dual-col .home-section-row {
        margin-bottom: 10px;
    }
/* Cards stack vertically inside each column */
.home-grid.home-grid-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
/* Compact cards in the dual Recent+Pinned layout — these are quick-access
   shortcuts, not full reading cards, so we strip the preview and date */
.home-dual .home-card {
    padding: 10px 12px !important;
    min-height: auto !important;
}

.home-dual .home-card-preview,
.home-dual .home-card-footer {
    display: none !important;
}

.home-dual .home-card-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 4px 0 0 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-dual .home-card-crumb {
    font-size: 9px !important;
    margin-bottom: 0 !important;
}
/* Slightly smaller still on mobile */
.nota.compact .home-dual .home-card {
    padding: 9px 11px !important;
}

.nota.compact .home-dual .home-card-title {
    font-size: 13px !important;
}
/* Single-column on very narrow screens (below 380px) */
@media (max-width: 380px) {
    .home-dual {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Slim TipTap toolbar on mobile — hide secondary buttons */
.nota.compact .tt-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px !important;
    gap: 2px !important;
    scrollbar-width: none;
}

    .nota.compact .tt-toolbar::-webkit-scrollbar {
        display: none;
    }

.nota.compact .tt-only-desktop {
    display: none !important;
}

.nota.compact .tt-btn {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
}

.nota.compact .tt-sep {
    margin: 0 4px !important;
}

/* ============================================================
   SETTINGS MODAL — MOBILE LAYOUT
   On mobile, stack sp-nav above sp-content. Tabs scroll horizontally
   in their own strip; sign-out gets its own row below.
   ============================================================ */
@media (max-width: 768px) {
    .sp-overlay {
        padding: 0 !important;
    }

        .sp-overlay .sp-modal {
            flex-direction: column !important;
            width: 100% !important;
            max-width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            border-radius: 0 !important;
            margin: 0 !important;
        }

        .sp-overlay .sp-nav {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 auto !important;
            border-right: none !important;
            border-bottom: 1px solid rgba(255,255,255,0.08) !important;
            padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
        }
        /* Hide the big avatar block on mobile to save vertical space */
        .sp-overlay .sp-nav-profile {
            display: none !important;
        }
        /* Tabs are a horizontal scrolling row — full width of their own */
        .sp-overlay .sp-nav-tabs {
            display: flex !important;
            flex-direction: row !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            gap: 4px !important;
            padding: 0 !important;
            margin: 0 !important;
            scrollbar-width: none;
            width: 100% !important;
            flex: 0 0 auto !important;
        }

            .sp-overlay .sp-nav-tabs::-webkit-scrollbar {
                display: none;
            }

        .sp-overlay .sp-tab {
            flex: 0 0 auto !important;
            font-size: 13px !important;
            padding: 8px 14px !important;
            white-space: nowrap !important;
            min-width: auto !important;
            width: auto !important;
        }
        /* Sign-out goes in its own full-width row below the tabs */
        .sp-overlay .sp-logout-btn {
            margin: 0 !important;
            width: 100% !important;
            justify-content: center !important;
            flex: 0 0 auto !important;
            order: 99;
        }
        /* Hide copyright on mobile — too cramped, brand still in tabbar/elsewhere */
        .sp-overlay .sp-copyright {
            display: none !important;
        }

        .sp-overlay .sp-content {
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }

        .sp-overlay .sp-content-body {
            padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        }
}

/* "Shared" badge shown to non-owners in place of the delete button */
.collab-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(108,92,231,0.15);
    color: var(--n-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(108,92,231,0.25);
    user-select: none;
    white-space: nowrap;
}

.nota.theme-light .collab-badge {
    background: rgba(108,92,231,0.08);
    border-color: rgba(108,92,231,0.2);
}

/* Manageable collab stack — pointer cursor + subtle hover */
.collab-stack.manageable {
    cursor: pointer;
    transition: transform 0.15s;
}

    .collab-stack.manageable:hover {
        transform: scale(1.05);
    }

/* Collab badge as a button */
button.collab-badge {
    cursor: pointer;
    transition: all 0.15s;
}

    button.collab-badge:hover {
        background: rgba(108,92,231,0.25);
        border-color: rgba(108,92,231,0.4);
        transform: translateY(-1px);
    }

/* Collab manage rows */
.collab-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.nota.theme-light .collab-row {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}

.collab-row-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

    .collab-row-avatar img,
    .collab-row-avatar span {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        object-fit: cover;
    }

.collab-row-meta {
    flex: 1;
    min-width: 0;
}

.collab-row-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--n-text);
}

.collab-row-sub {
    font-size: 11px;
    color: var(--n-text-3);
    margin-top: 2px;
}

.collab-row-remove {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.25);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

    .collab-row-remove:hover {
        background: rgba(239,68,68,0.2);
    }

/* ============================================================
   SLACK-STYLE HOME SECTIONS
   Collapsible sections with tight, list-style rows.
   Replaces the dual-column card grid.
   ============================================================ */
.home-sec {
    margin-bottom: 18px;
}

.home-sec-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    margin-bottom: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.55);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.15s;
    text-align: left;
    border-radius: 6px;
}

    .home-sec-head:hover {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.04);
    }

.nota.theme-light .home-sec-head {
    color: #6b7280;
}

    .nota.theme-light .home-sec-head:hover {
        color: #1f2937;
        background: rgba(0,0,0,0.04);
    }

.home-sec-chev {
    display: inline-block;
    width: 14px;
    font-size: 10px;
    transition: transform 0.18s;
    opacity: 0.7;
}

    .home-sec-chev.collapsed {
        transform: rotate(-90deg);
    }

.home-sec-name {
    flex: 1;
}

.home-sec-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    padding: 1px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.nota.theme-light .home-sec-count {
    background: rgba(0,0,0,0.06);
    color: #6b7280;
}

.home-sec-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--n-text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    transition: background 0.12s, transform 0.12s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    .home-row:hover {
        background: rgba(255,255,255,0.05);
        transform: translateX(2px);
    }

.nota.theme-light .home-row:hover {
    background: rgba(0,0,0,0.04);
}

.home-row:focus-visible {
    background: rgba(108,92,231,0.12);
}

.home-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-row-icon {
    font-size: 16px;
    opacity: 0.9;
}

.home-row-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
    justify-self: start;
}

.home-row-meta {
    font-size: 12px;
    color: var(--n-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.home-row-date {
    font-size: 11px;
    color: var(--n-text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.home-row-shared-tag {
    background: rgba(108,92,231,0.15);
    color: var(--n-accent);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Mobile: drop the breadcrumb meta column to save space */
@media (max-width: 600px) {
    .home-row {
        grid-template-columns: auto 1fr auto;
        padding: 10px 12px;
    }

    .home-row-icon {
        display: none;
    }

    .home-row-meta {
        display: none;
    }
    /* Notebook rows: chev + dot + title + date */
    .home-row.home-row-nb {
        grid-template-columns: auto auto 1fr auto !important;
    }
    /* Section rows: chev + dot + title + count */
    .home-row.home-row-sec {
        grid-template-columns: auto auto 1fr auto !important;
    }
    /* Note rows: bullet + title + date */
    .home-row.home-row-note {
        grid-template-columns: auto 1fr auto !important;
    }
}

/* ============================================================
   HOME content-bar (desktop): avatar, name, counts, search
   inline in the dark top strip - hides the redundant hero below
   ============================================================ */
.nota-content-bar.home-bar {
    height: 64px;
    padding: 0 24px;
    gap: 16px;
}

.content-bar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.content-bar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.content-bar-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.content-bar-meta {
    min-width: 0;
}

.content-bar-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--n-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.content-bar-sub {
    font-size: 11px;
    color: var(--n-text-3);
    margin-top: 2px;
    white-space: nowrap;
}

.content-bar-search {
    flex: 1;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    transition: all 0.15s;
}

    .content-bar-search:focus-within {
        background: rgba(255,255,255,0.09);
        border-color: rgba(108,92,231,0.5);
        box-shadow: 0 0 0 3px rgba(108,92,231,0.12);
    }

.nota.theme-light .content-bar-search {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}

    .nota.theme-light .content-bar-search:focus-within {
        background: rgba(0,0,0,0.06);
        border-color: rgba(108,92,231,0.5);
    }

.content-bar-search-icon {
    color: var(--n-text-3);
    flex-shrink: 0;
}

.content-bar-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--n-text);
    font-family: inherit;
    font-size: 13px;
}

    .content-bar-search-input::placeholder {
        color: var(--n-text-3);
    }

/* On desktop home, hide the home-hero entirely — content bar replaces it */
.nota.desktop .home-page .home-hero {
    display: none !important;
}
/* Trim home page top padding now that there's no hero */
.nota.desktop .home-page {
    padding-top: 0 !important;
}

.nota.desktop .home-content {
    padding-top: 16px !important;
}

/* ============================================================
   FLOATING NOTES — push to background, low opacity, no clicks
   On desktop: a CSS mask fades out the left ~520px so the notes
   only appear in the central/right area, clear of the content list.
   On mobile/tablet: hidden entirely.
   ============================================================ */
.home-animated-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    /* Fade the layer in horizontally — fully transparent for the leftmost
       66% (where the content list lives), then fully opaque from there on,
       so the dark "reading column" extends to two-thirds of the screen. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 65%, black 70%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 65%, black 70%);
}

    .home-animated-bg .floating-notes,
    .home-animated-bg .fnote {
        pointer-events: none !important;
    }

    .home-animated-bg .fnote {
        opacity: 0.22 !important;
        filter: blur(0.3px);
    }

.nota.theme-light .home-animated-bg .fnote {
    opacity: 0.3 !important;
}

@media (min-width: 1400px) {
    .home-animated-bg {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 65%, black 70%);
        mask-image: linear-gradient(to right, transparent 0%, transparent 65%, black 70%);
    }
}
/* Hide entirely on tablet and mobile */
@media (max-width: 1024px) {
    .home-animated-bg {
        display: none !important;
    }
}

/* Make sure all real home content sits above the floating layer */
.home-page {
    position: relative;
}

.home-content {
    position: relative !important;
    z-index: 1 !important;
}
/* And the sectioned list rows specifically */
.home-body, .home-sec, .home-row {
    position: relative;
    z-index: 1;
}

    /* DM rows in the home Direct Messages section */
    .home-row.dm-row {
        grid-template-columns: auto 1fr auto auto;
    }

.dm-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dm-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dm-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 10px;
    }

.home-row-unread {
    background: var(--n-accent) !important;
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 10px;
    min-width: 18px;
    text-align: center;
}

@media (max-width: 600px) {
    .home-row.dm-row {
        grid-template-columns: auto 1fr auto;
    }
}

/* Typing indicator on DM rows in home */
.home-row-typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--n-accent);
    font-size: 12px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.typing-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--n-accent);
    display: inline-block;
    animation: typing-bounce 1.4s infinite ease-in-out;
}

    .typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes typing-bounce {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* Drill-down rows: notebook → sections → notes */
.home-row-chev {
    display: inline-block;
    width: 12px;
    font-size: 9px;
    opacity: 0.5;
    transition: transform 0.18s;
    text-align: center;
}

    .home-row-chev.collapsed {
        transform: rotate(-90deg);
    }

.home-row-nb {
    font-weight: 700;
    grid-template-columns: auto auto auto 1fr auto auto !important;
}

.home-nb-children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 12px;
    margin-bottom: 4px;
    border-left: 1px solid rgba(255,255,255,0.06);
    margin-left: 18px;
}

.nota.theme-light .home-nb-children {
    border-left-color: rgba(0,0,0,0.08);
}

.home-row-sec {
    grid-template-columns: auto auto 1fr auto !important;
    font-size: 13px;
    padding: 7px 12px !important;
    color: var(--n-text-2);
}

.home-sec-children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.05);
    margin-left: 18px;
}

.nota.theme-light .home-sec-children {
    border-left-color: rgba(0,0,0,0.06);
}

.home-row-note {
    grid-template-columns: auto 1fr auto !important;
    font-size: 13px;
    padding: 6px 12px !important;
    color: var(--n-text-2);
}

    .home-row-note:hover {
        color: var(--n-text);
    }

.home-row-bullet {
    color: var(--n-text-4);
    font-weight: 700;
    font-size: 16px;
    width: 8px;
    text-align: center;
}

.home-row-empty {
    grid-template-columns: 1fr !important;
    padding: 6px 12px !important;
    font-size: 12px;
    color: var(--n-text-4);
    font-style: italic;
    cursor: default !important;
    pointer-events: none;
}

@media (max-width: 600px) {
    .home-nb-children, .home-sec-children {
        margin-left: 12px;
        padding-left: 8px;
    }
}

/* Editor back button - mobile only */
.editor-mobile-back {
    display: none;
    background: var(--n-surface);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    color: var(--n-text);
    width: 34px;
    height: 34px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
}

    .editor-mobile-back:hover {
        background: var(--n-surface-hover);
        border-color: var(--n-accent);
        transform: translateX(-2px);
    }

@media (max-width: 768px) {
    .editor-mobile-back {
        display: inline-flex !important;
    }
}

/* ============================================================
   MOBILE EDITOR - reclaim space when a note is active
   ============================================================ */

/* Default: desktop shows individual buttons, mobile shows ⋯ menu */
.toolbar-actions-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-actions-mobile {
    display: none;
    position: relative;
}

@media (max-width: 768px) {
    .toolbar-actions-desktop {
        display: none;
    }

    .toolbar-actions-mobile {
        display: inline-flex;
        align-items: center;
    }
}

/* When a note is active on mobile, hide the redundant notes-panel-header
   ("Home / Section title / +New") since the editor toolbar already has back
   button and breadcrumb. Saves a whole row of vertical space. */
@media (max-width: 768px) {
    .nota.compact .section-page.has-active-note .notes-panel,
    body.is-mobile .section-page.has-active-note .notes-panel {
        display: none !important;
    }
    /* Trim breadcrumb on mobile so toolbar fits everything */
    .nota.compact .section-page.has-active-note .editor-breadcrumb,
    body.is-mobile .section-page.has-active-note .editor-breadcrumb {
        font-size: 12px !important;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Hide the verbose "Last edited by" + active editors on mobile - too crowded */
    .nota.compact .section-page.has-active-note .last-edited-by,
    body.is-mobile .section-page.has-active-note .last-edited-by,
    .nota.compact .section-page.has-active-note .active-editors,
    body.is-mobile .section-page.has-active-note .active-editors {
        display: none !important;
    }
    /* Save indicator just shows ✓ on mobile to save space */
    .nota.compact .section-page.has-active-note .save-indicator,
    body.is-mobile .section-page.has-active-note .save-indicator {
        font-size: 0 !important;
    }

        .nota.compact .section-page.has-active-note .save-indicator.saved::before {
            content: "✓";
            font-size: 14px;
            color: #4ade80;
        }

        .nota.compact .section-page.has-active-note .save-indicator.saving::before {
            content: "…";
            font-size: 14px;
            color: var(--n-text-3);
        }
}

/* Note actions dropdown menu (mobile ⋯) */
.note-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 990;
    background: transparent;
}

.note-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 200px;
    /* Solid opaque background — no bleed-through from text underneath */
    background: #1a1840;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    padding: 6px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nota.theme-light .note-menu {
    background: #ffffff;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}

/* Make sure toolbar stays on a single line on mobile, no wrapping */
@media (max-width: 768px) {
    .nota.compact .editor-toolbar,
    body.is-mobile .editor-toolbar {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        height: auto !important;
        min-height: 44px;
        align-items: center;
    }

        .nota.compact .editor-toolbar .toolbar-left,
        body.is-mobile .editor-toolbar .toolbar-left {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap !important;
            overflow: hidden;
        }

        .nota.compact .editor-toolbar .toolbar-right,
        body.is-mobile .editor-toolbar .toolbar-right {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 4px;
        }
    /* On mobile, hide collaborator avatars in the toolbar — too cramped.
       The user can still tap into Manage Collaborators from the ⋯ menu. */
    .nota.compact .section-page.has-active-note .collab-stack,
    body.is-mobile .section-page.has-active-note .collab-stack {
        display: none !important;
    }
}

.note-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--n-text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
    width: 100%;
}

    .note-menu-item:hover {
        background: var(--n-surface-hover);
    }

    .note-menu-item span {
        font-size: 16px;
        width: 18px;
        text-align: center;
    }

    .note-menu-item.active {
        color: var(--n-accent);
        font-weight: 700;
    }

    .note-menu-item.danger {
        color: #ef4444;
    }

        .note-menu-item.danger:hover {
            background: rgba(239,68,68,0.1);
        }

/* ============================================================
   QUICK NOTES — FAB + capture modal
   ============================================================ */

.quicknote-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    /* Inner drop shadow + soft amber halo ring around the button */
    box-shadow: 0 10px 30px rgba(251,191,36,0.4), 0 0 0 6px rgba(251,191,36,0.08);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 200ms cubic-bezier(0.2,0.8,0.2,1);
}

    .quicknote-fab:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(251,191,36,0.5), 0 0 0 8px rgba(251,191,36,0.10);
    }

    .quicknote-fab:active {
        transform: translateY(0);
    }

.quicknote-fab-icon {
    font-size: 26px;
    line-height: 1;
}
/* Position above the mobile bottom tabbar */
@media (max-width: 768px) {
    .quicknote-fab {
        bottom: calc(80px + env(safe-area-inset-bottom));
        right: 16px;
        width: 52px;
        height: 52px;
    }

    .quicknote-fab-icon {
        font-size: 24px;
    }
}

/* Capture modal */
.quicknote-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    animation: qn-fade 0.15s ease-out;
}

@keyframes qn-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.quicknote-modal {
    background: #1a1840;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 16px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: qn-pop 0.18s ease-out;
}

@keyframes qn-pop {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.nota.theme-light .quicknote-modal {
    background: #ffffff;
    border-color: rgba(0,0,0,0.1);
    color: #13132b;
}

.quicknote-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.quicknote-modal-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fbbf24;
}

.quicknote-modal-close {
    background: none;
    border: none;
    color: var(--n-text-3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s;
}

    .quicknote-modal-close:hover {
        background: rgba(255,255,255,0.06);
        color: var(--n-text);
    }

.nota.theme-light .quicknote-modal-close:hover {
    background: rgba(0,0,0,0.06);
}

.quicknote-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--n-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .quicknote-input:focus {
        border-color: #fbbf24;
        box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
    }

.nota.theme-light .quicknote-input {
    background: #f5f6fc;
    border-color: rgba(0,0,0,0.1);
    color: #13132b;
}

.quicknote-input::placeholder {
    color: var(--n-text-3);
}

.quicknote-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
}

.quicknote-hint {
    font-size: 11px;
    color: var(--n-text-4);
    font-style: italic;
}

.quicknote-save {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1840;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 4px 14px rgba(251,191,36,0.35);
}

    .quicknote-save:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(251,191,36,0.5);
    }

    .quicknote-save:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Quick Notes FAB on/off pill in the section header */
.home-sec-fab-toggle {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

    .home-sec-fab-toggle:hover {
        background: rgba(255,255,255,0.12);
        color: var(--n-text);
    }

.nota.theme-light .home-sec-fab-toggle {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.5);
}

    .nota.theme-light .home-sec-fab-toggle:hover {
        background: rgba(0,0,0,0.1);
        color: rgba(0,0,0,0.8);
    }

/* ============================================================
   TIPTAP — TAGS, CODE BLOCKS, INLINE IMAGES
   ============================================================ */

/* Tags rendered as pill-shaped chips inline */
.ProseMirror .tt-tag {
    display: inline-block;
    background: rgba(108, 92, 231, 0.18);
    color: #a78bfa;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.92em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
    margin: 0 1px;
}

    .ProseMirror .tt-tag:hover {
        background: rgba(108, 92, 231, 0.32);
    }

.nota.theme-light .ProseMirror .tt-tag {
    background: rgba(108, 92, 231, 0.12);
    color: #6c5ce7;
}

    .nota.theme-light .ProseMirror .tt-tag:hover {
        background: rgba(108, 92, 231, 0.22);
    }

/* Code blocks (pre + code) with lowlight highlighting */
.ProseMirror pre {
    background: #0d0c2a;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.55;
    padding: 14px 16px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    white-space: pre;
}

    .ProseMirror pre code {
        background: none;
        color: inherit;
        padding: 0;
        font-size: inherit;
        border-radius: 0;
    }

.nota.theme-light .ProseMirror pre {
    background: #1e1b3a;
    color: #f1f5f9;
}

/* Inline code (single backtick) */
.ProseMirror code {
    background: rgba(255,255,255,0.08);
    color: #fda4af;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Menlo', monospace;
    font-size: 0.9em;
}

.nota.theme-light .ProseMirror code {
    background: rgba(0,0,0,0.06);
    color: #be123c;
}

/* Lowlight syntax theme — github-dark inspired colors */
.ProseMirror pre .hljs-comment, .ProseMirror pre .hljs-quote {
    color: #8b949e;
    font-style: italic;
}

.ProseMirror pre .hljs-keyword, .ProseMirror pre .hljs-selector-tag, .ProseMirror pre .hljs-literal {
    color: #ff7b72;
}

.ProseMirror pre .hljs-string, .ProseMirror pre .hljs-meta-string {
    color: #a5d6ff;
}

.ProseMirror pre .hljs-number, .ProseMirror pre .hljs-symbol, .ProseMirror pre .hljs-bullet {
    color: #79c0ff;
}

.ProseMirror pre .hljs-title, .ProseMirror pre .hljs-section, .ProseMirror pre .hljs-name {
    color: #d2a8ff;
}

.ProseMirror pre .hljs-attr, .ProseMirror pre .hljs-attribute {
    color: #79c0ff;
}

.ProseMirror pre .hljs-variable, .ProseMirror pre .hljs-template-variable {
    color: #ffa657;
}

.ProseMirror pre .hljs-built_in, .ProseMirror pre .hljs-class .hljs-title {
    color: #ffa657;
}

.ProseMirror pre .hljs-tag, .ProseMirror pre .hljs-meta {
    color: #7ee787;
}

.ProseMirror pre .hljs-emphasis {
    font-style: italic;
}

.ProseMirror pre .hljs-strong {
    font-weight: 700;
}

.ProseMirror pre .hljs-deletion {
    color: #ffa198;
    background: rgba(248,81,73,0.15);
}

.ProseMirror pre .hljs-addition {
    color: #7ee787;
    background: rgba(46,160,67,0.15);
}

/* Images pasted inline — limit max width and add nice rounded corners */
.ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
}

.nota.theme-light .ProseMirror img {
    border-color: rgba(0,0,0,0.08);
}

/* ============================================================
   TAGS — home tag cloud + tag detail page
   ============================================================ */

/* Tag cloud inside a home section */
.home-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px 14px;
}

.home-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    background: rgba(108, 92, 231, 0.15);
    border: 1px solid rgba(108, 92, 231, 0.25);
    color: #c7b9ff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

    .home-tag-chip:hover {
        background: rgba(108, 92, 231, 0.28);
        border-color: rgba(108, 92, 231, 0.5);
        transform: translateY(-1px);
    }

.home-tag-chip-name {
    color: inherit;
}

.home-tag-chip-count {
    background: rgba(255,255,255,0.12);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    text-align: center;
}

.nota.theme-light .home-tag-chip {
    background: rgba(108, 92, 231, 0.1);
    border-color: rgba(108, 92, 231, 0.2);
    color: #6c5ce7;
}

    .nota.theme-light .home-tag-chip:hover {
        background: rgba(108, 92, 231, 0.18);
    }

.nota.theme-light .home-tag-chip-count {
    background: rgba(108, 92, 231, 0.7);
    color: #fff;
}

/* Tag detail page */
.tag-page {
    flex: 1;
    overflow-y: auto;
    background: var(--n-bg);
    padding: 0;
}

.tag-page-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--n-border-light);
    background: var(--n-bg-2);
}

.tag-back-btn {
    background: none;
    border: none;
    color: var(--n-text-3);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    width: fit-content;
    transition: color 0.12s;
}

    .tag-back-btn:hover {
        color: var(--n-text);
    }

.tag-page-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tag-page-pill {
    background: rgba(108, 92, 231, 0.2);
    color: #a78bfa;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.nota.theme-light .tag-page-pill {
    background: rgba(108, 92, 231, 0.15);
    color: #6c5ce7;
}

.tag-page-meta {
    color: var(--n-text-4);
    font-size: 13px;
    font-weight: 500;
}

.tag-page-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 14px;
}

.tag-page-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--n-text-4);
}

.tag-page-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.tag-page-empty p {
    margin: 8px 0;
}

.tag-page-empty strong {
    color: var(--n-text-2);
}

.tag-page-empty-hint {
    font-size: 12px;
    color: var(--n-text-4);
    max-width: 420px;
    margin: 16px auto 0 !important;
}

.tag-page-empty code {
    background: var(--n-surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    font-size: 12px;
}

/* Make tag pills inside the editor look clickable */
.ProseMirror .tt-tag {
    cursor: pointer !important;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .tag-page-header {
        padding: 14px 16px 12px;
    }

    .tag-page-pill {
        font-size: 15px;
        padding: 5px 11px;
    }

    .tag-page-list {
        padding: 8px 10px;
    }
}

/* Notespark wordmark in the mobile home hero (top-left, above avatar row).
   Hidden on desktop because the rail icon is always visible there. */
.home-hero-brand {
    display: none;
    margin-bottom: 14px;
}

.home-hero-logo {
    height: 28px;
    width: auto;
    display: block;
}

.nota.compact .home-hero-brand,
body.is-mobile .home-hero-brand {
    display: block;
}

/* ══════════════════════════════════════
   AUTH / LOGIN — mobile centered card
   Overrides the bottom-sheet pattern from app.css
   (body.is-mobile .login-card-wrap pins to bottom).
   We match its selector specificity and rely on
   nota-layout.css loading after app.css.
══════════════════════════════════════ */
@media (max-width: 768px) {
    body.is-mobile .login-card-wrap {
        align-items: center;
        justify-content: center;
        padding: 72px 20px 32px;
    }

    body.is-mobile .login-card {
        width: calc(100% - 24px);
        max-width: 420px;
        border-radius: 24px;
        padding: 32px 24px 28px;
        margin: 0 auto;
    }

    /* Fallback for the brief moment before the JS class is applied */
    .login-card-wrap {
        align-items: center;
        justify-content: center;
    }

    .login-card {
        max-width: 420px;
        border-radius: 24px;
        margin: 0 auto;
    }
}
/* ============================================================
   HOME LAYOUT — DESKTOP ONLY
   The .home-sec-name span has flex:1, which stretches it across
   the entire row width — that's why the count chip and toggle sit
   at the far right edge. We pull them in by:
   1) constraining the row width to a comfortable reading width
   2) keeping flex:1 on the name (so it still pushes the count to
      the right edge of the constrained row, not glued to the label)
   3) capping the home-body so the dark content sits in the left 2/3,
      leaving the right 1/3 for floating notes to drift through.
   ============================================================ */

.nota.desktop .home-body {
    max-width: 66%;
    width: 100%;
    box-sizing: border-box;
}

    .nota.desktop .home-body .home-sec-head,
    .nota.desktop .home-body .home-sec-list,
    .nota.desktop .home-body .home-row {
        max-width: 700px;
    }

/* On really wide screens (4K etc) cap the absolute width so the
   reading column doesn't get cartoonishly wide. */
@media (min-width: 1800px) {
    .nota.desktop .home-body {
        max-width: 1200px;
    }

        .nota.desktop .home-body .home-sec-head,
        .nota.desktop .home-body .home-sec-list,
        .nota.desktop .home-body .home-row {
            max-width: 800px;
        }
}

/* ============================================================
   MOBILE — bolder, more prominent section labels on home.
   The base style at .home-sec-head is uppercase 11px / weight 800
   which reads thin on a phone. Bump to 13px / weight 900 and full
   white opacity so the headers feel like proper section dividers.
   ============================================================ */
.nota.compact .home-sec-head {
    font-size: 13px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.95);
}

.nota.compact .home-sec-name {
    font-weight: 900;
}

.nota.compact.theme-light .home-sec-head {
    color: #111827;
}
/* ═══════════════════════════════════════════════════════════════════
   CONTACTS PAGE
   List view, detail view, status pills, scope chips.
   ═══════════════════════════════════════════════════════════════════ */

.contacts-page {
    padding: 24px 32px;
    max-width: 1100px;
    margin: 0 auto;
    color: var(--n-text);
}

.contacts-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.contacts-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contacts-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contacts-title-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.contacts-new-btn {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .contacts-new-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4);
    }

.contacts-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contacts-tab {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

    .contacts-tab:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    .contacts-tab.active {
        color: var(--n-text);
        border-bottom-color: #7C3AED;
    }

.contacts-search {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--n-text);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

    .contacts-search:focus {
        outline: none;
        border-color: #7C3AED;
        background: rgba(255, 255, 255, 0.08);
    }

.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contacts-empty {
    padding: 60px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: var(--n-text);
    transition: background 0.15s, transform 0.15s;
}

    .contact-card:hover {
        background: rgba(255, 255, 255, 0.07);
        transform: translateY(-1px);
    }

.contact-card-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

    .contact-card-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .contact-card-avatar span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: white;
        font-weight: 700;
        font-size: 14px;
    }

.contact-card-body {
    flex: 1;
    min-width: 0;
}

.contact-card-name {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-card-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-card-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.contact-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contact-status-cold {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
}

.contact-status-warm {
    background: rgba(251, 191, 36, 0.18);
    color: #fcd34d;
}

.contact-status-hot {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.contact-status-customer {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.contact-status-lost {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
}

.contact-scope {
    font-size: 14px;
    opacity: 0.6;
}

/* ── Detail page ── */

.contact-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 16px 24px 80px;
    color: var(--n-text);
}

.contact-detail-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.contact-back-btn {
    background: none;
    border: none;
    color: var(--n-text);
    font-size: 15px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
}

    .contact-back-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

.contact-saved-pill {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.contact-action-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--n-text);
}

.contact-action-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.contact-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}

.contact-detail-avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
}

    .contact-detail-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .contact-detail-avatar span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: white;
        font-weight: 700;
        font-size: 22px;
    }

.contact-detail-name-row {
    flex: 1;
    min-width: 0;
}

.contact-detail-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
}

.contact-detail-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.contact-detail-quick-actions {
    display: flex;
    gap: 8px;
}

.contact-quick-action {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--n-text);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s;
}

    .contact-quick-action:hover {
        background: rgba(255, 255, 255, 0.1);
    }

.contact-detail-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 20px;
}

    .contact-section h3 {
        margin: 0 0 14px;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.5);
    }

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.contact-save-row {
    position: sticky;
    bottom: 0;
    background: var(--n-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    /* Above form fields underneath */
    z-index: 5;
}

.nota.theme-light .contact-save-row {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ── Mobile ── */

@media (max-width: 768px) {
    .contacts-page {
        padding: 16px 12px;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        padding-bottom: 100px; /* clear the bottom tab bar */
    }

    .contacts-header-top {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .contacts-new-btn {
        width: 100%;
        text-align: center;
    }

    .contacts-search {
        max-width: 100%;
        box-sizing: border-box;
    }

    .contacts-list {
        max-width: 100%;
    }

    .contact-card {
        max-width: 100%;
        box-sizing: border-box;
        gap: 10px;
        padding: 10px 12px;
    }

    .contact-card-name,
    .contact-card-sub {
        font-size: 14px;
    }

    .contact-card-tags {
        flex-shrink: 0;
    }

    /* Detail page */
    .contact-detail {
        padding: 12px 12px 140px; /* extra bottom: clears tab bar (64px) + save bar (~50px) */
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .form-row-2,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .contact-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .contact-detail-quick-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .contact-quick-action {
        flex: 1;
        text-align: center;
        min-width: 0; /* let them shrink to fit */
    }

    /* Save bar — full-width solid bar that sits above the bottom tab bar */
    .contact-save-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 64px; /* clear the tab bar */
        margin: 0;
        padding: 10px 12px;
        background: var(--n-bg);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 50;
    }

        .contact-save-row .btn-primary {
            flex: 1;
        }

    .form-input {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ── Light theme ── */

.nota.theme-light .contact-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

    .nota.theme-light .contact-card:hover {
        background: rgba(0, 0, 0, 0.06);
    }

.nota.theme-light .contact-card-sub,
.nota.theme-light .contact-detail-sub,
.nota.theme-light .contact-section h3 {
    color: rgba(0, 0, 0, 0.5);
}

.nota.theme-light .contact-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.nota.theme-light .contacts-search,
.nota.theme-light .contact-action-btn,
.nota.theme-light .contact-quick-action {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Form labels need to be light on dark theme inside the contacts pages
   (the base .form-group label rule hard-codes #111827 which works on
   light backgrounds but disappears against the dark section panels). */
.nota.theme-dark .contacts-page .form-group label,
.nota.theme-dark .contact-detail .form-group label {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Contact detail tabs ── */
.contact-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
    padding-bottom: 0;
}

.contact-tab {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
    border-radius: 6px 6px 0 0;
}

    .contact-tab:hover {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.03);
    }

    .contact-tab.active {
        color: var(--n-text);
        border-bottom-color: #7C3AED;
        background: rgba(124, 58, 237, 0.08);
    }

.contact-tab-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    min-height: 200px;
}

/* Light theme */
.nota.theme-light .contact-tabs {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.nota.theme-light .contact-tab {
    color: rgba(0, 0, 0, 0.5);
}

    .nota.theme-light .contact-tab:hover {
        color: rgba(0, 0, 0, 0.8);
        background: rgba(0, 0, 0, 0.03);
    }

    .nota.theme-light .contact-tab.active {
        background: rgba(124, 58, 237, 0.06);
    }

.nota.theme-light .contact-tab-panel {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Mobile — tabs scroll horizontally if too many */
@media (max-width: 768px) {
    .contact-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

        .contact-tabs::-webkit-scrollbar {
            display: none;
        }

    .contact-tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .contact-tab-panel {
        padding: 14px;
    }
}

/* Badge on home hero action buttons (used for the inbox/shared count) */
.home-hero-action.has-notif {
    /* subtle highlight when there's something pending */
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.4);
}

.home-hero-action-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #7C3AED;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK-THEME MODAL OVERRIDES
   The base .modal rule in app.css hard-codes #ffffff/#111827 which works
   on light theme but inverts terribly on dark. Override the surface colours,
   borders, and form inputs inside modals when in dark mode.
   ═══════════════════════════════════════════════════════════════════ */

.nota.theme-dark .modal {
    background: #1a1840;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

    .nota.theme-dark .modal h3 {
        color: #f1f5f9;
    }

    .nota.theme-dark .modal p,
    .nota.theme-dark .modal label {
        color: rgba(255, 255, 255, 0.7);
    }

    .nota.theme-dark .modal .form-input {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
        color: #f1f5f9;
    }

        .nota.theme-dark .modal .form-input::placeholder {
            color: rgba(255, 255, 255, 0.35);
        }

        .nota.theme-dark .modal .form-input:focus {
            border-color: #7C3AED;
            background: rgba(255, 255, 255, 0.09);
        }

    .nota.theme-dark .modal select.form-input option {
        background: #1a1840;
        color: #f1f5f9;
    }

    .nota.theme-dark .modal .btn-secondary {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #f1f5f9;
    }

        .nota.theme-dark .modal .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.12);
        }

/* Mobile — make sure modals fit comfortably and aren't cut off by tab bar */
@media (max-width: 768px) {
    .modal {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — Bottom tab bar stays accessible during full-screen overlays
   The Settings (sp-overlay) modal uses z-index:5000 and 90vh height,
   which on mobile covers the tab bar. Keep the tab bar above any
   modal/overlay so reps never lose navigation.
   ═══════════════════════════════════════════════════════════════════ */
.nota.compact .nota-tabbar {
    position: relative;
    z-index: 6000;
    flex-shrink: 0;
}

/* Settings overlay — leave room for the tab bar so the user can navigate away */
@media (max-width: 768px) {
    .sp-overlay {
        bottom: 64px; /* clear the tab bar */
        align-items: stretch;
    }

    body.is-mobile .sp-modal {
        height: 100%;
        max-height: 100%;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS PANEL — DARK MODE COLOUR HARMONY
   The base sp-modal/sp-nav rules in app.css use #16133a and #0f0d2e
   which read as a different shade from our standard dark modal (#1a1840).
   Bring them in line so Settings doesn't look like a different app.
   ═══════════════════════════════════════════════════════════════════ */

.nota.theme-dark .sp-modal {
    background: #1a1840;
    border-color: rgba(255, 255, 255, 0.1);
}

.nota.theme-dark .sp-nav {
    background: #15133a;
    border-right-color: rgba(255, 255, 255, 0.06);
}

.nota.theme-dark .sp-content {
    background: #1a1840;
}

/* Inputs inside settings — use the same dark-surface pattern as modal inputs */
.nota.theme-dark .sp-overlay .form-input,
.nota.theme-dark .sp-overlay input[type="text"]:not(.form-input),
.nota.theme-dark .sp-overlay input[type="email"]:not(.form-input),
.nota.theme-dark .sp-overlay input[type="password"]:not(.form-input) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK NOTES — POST-IT STYLING (desktop only)
   Cream paper cards, slight placed-by-hand rotation, paper drop-shadow.
   Scoped to .quicknote-postit so .home-row everywhere else (recently
   edited, tags, notebooks) is untouched. Mobile keeps the simple list
   layout — reps don't want skewed rotated cards on a phone.
   ═══════════════════════════════════════════════════════════════════ */

.nota.desktop .quicknote-stream {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 16px;
    padding: 6px 0 10px;
    /* cards have rotation/translate transforms — keep enough room around them */
    overflow: visible;
    max-width: 700px;
}

.nota.desktop .quicknote-postit {
    /* Override the base .home-row flex layout */
    display: block;
    background: #faf6e9;
    color: #2a2620;
    padding: 14px 14px 12px;
    /* paper-card asymmetric corners */
    border-radius: 4px 4px 4px 14px;
    border: none;
    /* Outer drop shadow + soft inner shadow gives the paper depth and
       a slight grain feel without an actual texture image. */
    box-shadow: 0 8px 22px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 6px rgba(0,0,0,0.06);
    cursor: pointer;
    text-align: left;
    position: relative;
    /* Fold-curl effect — bottom-right corner shadow + clip path so the
       corner appears slightly turned up. The pseudo-element draws a small
       triangular highlight that completes the illusion. */
    transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 220ms cubic-bezier(0.2,0.8,0.2,1);
    min-height: 92px;
}

    /* The folded-corner triangle in the bottom-right. A small pseudo-element
   that sits over the card's corner with a gradient creating the curl. */
    .nota.desktop .quicknote-postit::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 22px;
        height: 22px;
        background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.18) 65%, rgba(255,255,255,0.18) 75%, rgba(255,255,255,0.55) 100%);
        border-radius: 0 0 14px 0;
        pointer-events: none;
    }

    /* Bumped rotation so the "placed by hand" feel actually reads at this size.
   Was -0.6/+0.5deg — barely visible. Now -1.5/+1.4deg — clearly tilted. */
    .nota.desktop .quicknote-postit:nth-child(odd) {
        transform: rotate(-1.5deg);
    }

    .nota.desktop .quicknote-postit:nth-child(even) {
        transform: rotate(1.4deg);
    }
    /* Throw in a third variation so we don't get a strict zigzag pattern */
    .nota.desktop .quicknote-postit:nth-child(3n) {
        transform: rotate(-0.7deg);
    }

    .nota.desktop .quicknote-postit:hover {
        transform: rotate(0deg) translateY(-2px) scale(1.005);
        box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30);
    }

    .nota.desktop .quicknote-postit:active {
        transform: rotate(0deg) translateY(0) scale(0.995);
    }

    /* Hide the coloured dot on post-its — the amber paper IS the colour signal */
    .nota.desktop .quicknote-postit .home-row-dot {
        display: none;
    }

.nota.desktop .quicknote-postit-body {
    display: block;
    margin-bottom: 8px;
}

.nota.desktop .quicknote-postit-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 6px;
    color: #2a2620;
    /* clamp to one line */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nota.desktop .quicknote-postit-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    color: #4a4438;
    opacity: 0.85;
}

.nota.desktop .quicknote-postit .home-row-date {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    opacity: 0.55;
    color: #2a2620;
    white-space: nowrap;
}

/* Soften the post-it shadow on light theme so the page doesn't get noisy */
.nota.desktop.theme-light .quicknote-postit {
    box-shadow: 0 6px 18px rgba(15,17,23,0.10), 0 1px 2px rgba(15,17,23,0.06);
}

    .nota.desktop.theme-light .quicknote-postit:hover {
        box-shadow: 0 12px 28px rgba(15,17,23,0.14), 0 2px 4px rgba(15,17,23,0.08);
    }

/* ── Post-it paper colour variants (desktop only) ──
   Seven distinct paper tones so each note gets a stable colour by id.
   Mixing warm and cool tints — looks like a real wall of post-its rather
   than just shades of cream. Ink colour stays dark so contrast is good. */

.nota.desktop .quicknote-postit.quicknote-paper-1 {
    background: #fef3a8;
}
/* classic yellow */
.nota.desktop .quicknote-postit.quicknote-paper-2 {
    background: #fed7aa;
}
/* peach */
.nota.desktop .quicknote-postit.quicknote-paper-3 {
    background: #bfdbfe;
}
/* sky blue */
.nota.desktop .quicknote-postit.quicknote-paper-4 {
    background: #bbf7d0;
}
/* mint green */
.nota.desktop .quicknote-postit.quicknote-paper-5 {
    background: #fbcfe8;
}
/* pink */
.nota.desktop .quicknote-postit.quicknote-paper-6 {
    background: #ddd6fe;
}
/* lavender */
.nota.desktop .quicknote-postit.quicknote-paper-7 {
    background: #faf6e9;
}
/* cream */

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR — "NEXT UP" rows on the home page.
   Each row: time chip on the left, title + location/link in the middle,
   "in 25m" style window indicator on the right.
   ═══════════════════════════════════════════════════════════════════ */

.home-row-event {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
}

.home-event-time {
    flex: 0 0 56px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--n-text);
    padding-top: 1px;
}

.home-event-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.home-event-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--n-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-event-loc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.home-event-link {
    color: #a78bfa;
    text-decoration: none;
}

    a.home-event-link:hover {
        text-decoration: underline;
    }

.home-event-dur {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    padding-top: 2px;
    white-space: nowrap;
}

.nota.theme-light .home-event-loc,
.nota.theme-light .home-event-dur {
    color: rgba(0, 0, 0, 0.55);
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR — Home page preview card.
   Compact one-row summary linking to the full /calendar page.
   ═══════════════════════════════════════════════════════════════════ */

.home-cal-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(79, 70, 229, 0.08));
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 12px;
    text-decoration: none;
    color: var(--n-text);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

    .home-cal-preview:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(79, 70, 229, 0.12));
        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
    }

.home-cal-preview-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.home-cal-preview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.home-cal-preview-title {
    font-weight: 600;
    font-size: 14px;
}

.home-cal-preview-sub {
    font-size: 12px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-cal-preview-chev {
    font-size: 22px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR PAGE — /calendar
   Desktop: week list grouped by day.
   Mobile:  day-pill row + single-day events.
   ═══════════════════════════════════════════════════════════════════ */

.calendar-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 32px 80px;
    color: var(--n-text);
}

.cal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.cal-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cal-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--n-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

    .cal-nav-btn:hover {
        background: rgba(255, 255, 255, 0.12);
    }

.cal-range-label {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--n-text);
}

.cal-today-btn {
    padding: 6px 14px;
    border-radius: 8px;
    background: #7C3AED;
    border: none;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .cal-today-btn:hover {
        background: #6D28D9;
    }

.cal-loading {
    font-size: 13px;
    opacity: 0.6;
}

.cal-back-btn {
    font-size: 13px;
    opacity: 0.6;
    color: var(--n-text);
    text-decoration: none;
}

/* ── Empty states ── */

.cal-empty, .cal-empty-day {
    text-align: center;
    padding: 60px 24px;
    color: rgba(255, 255, 255, 0.65);
}

.cal-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.cal-empty h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.cal-empty p {
    margin: 0;
    font-size: 14px;
    opacity: 0.75;
}

.cal-empty-day p {
    margin: 0;
    font-size: 14px;
    opacity: 0.75;
}

/* ── Desktop: week list grouped by day ── */

.cal-weeklist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cal-day-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.cal-day-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

    .cal-day-header.today {
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(79, 70, 229, 0.06));
    }

.cal-day-name {
    font-weight: 700;
    font-size: 15px;
}

.cal-day-date {
    font-size: 13px;
    opacity: 0.65;
}

.cal-day-today-pill {
    font-size: 10px;
    font-weight: 700;
    background: #7C3AED;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.cal-day-count {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.55;
}

.cal-day-events {
    display: flex;
    flex-direction: column;
}

/* ── Event rows (shared desktop + mobile) ── */

.cal-event {
    display: flex;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

    .cal-event:first-child {
        border-top: none;
    }

    .cal-event.current {
        background: rgba(124, 58, 237, 0.08);
    }

.cal-event-time {
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    padding-top: 1px;
}

.cal-event-start {
    font-size: 14px;
    font-weight: 700;
}

.cal-event-end {
    font-size: 11px;
    opacity: 0.55;
}

.cal-event-allday {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0.75;
}

.cal-event-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cal-event-title {
    font-size: 14px;
    font-weight: 600;
}

.cal-event-loc, .cal-event-attendees {
    font-size: 12px;
    opacity: 0.6;
}

a.cal-event-link {
    color: #a78bfa;
    text-decoration: none;
}

    a.cal-event-link:hover {
        text-decoration: underline;
    }

/* ── Mobile: day-pills row ── */

.cal-daypills {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.cal-daypill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--n-text);
    position: relative;
    transition: background 0.15s;
}

    .cal-daypill:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .cal-daypill.today {
        color: #a78bfa;
    }

    .cal-daypill.active {
        background: #7C3AED;
        color: white;
    }

        .cal-daypill.active.today {
            color: white;
        }

.cal-daypill-dow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.cal-daypill-date {
    font-size: 16px;
    font-weight: 700;
}

.cal-daypill-dot {
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.cal-daypill.active .cal-daypill-dot {
    opacity: 1;
}

.cal-daylist {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Mobile spacing tweaks ── */

@media (max-width: 768px) {
    .calendar-page {
        padding: 16px 12px 100px;
    }

    .cal-topbar {
        margin-bottom: 16px;
    }

    .cal-range-label {
        font-size: 16px;
        flex: 1;
        min-width: 0;
    }

    .cal-event-time {
        flex-basis: 52px;
    }

    .cal-event-start {
        font-size: 13px;
    }
}

/* ── Light theme ── */

.nota.theme-light .cal-day-group,
.nota.theme-light .cal-daylist {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.nota.theme-light .cal-day-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.nota.theme-light .cal-event {
    border-top-color: rgba(0, 0, 0, 0.05);
}

.nota.theme-light .cal-empty,
.nota.theme-light .cal-empty-day {
    color: rgba(0, 0, 0, 0.6);
}

.nota.theme-light .cal-nav-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

    .nota.theme-light .cal-nav-btn:hover {
        background: rgba(0, 0, 0, 0.08);
    }

.nota.theme-light .cal-daypills {
    background: rgba(0, 0, 0, 0.03);
}

.nota.theme-light .cal-daypill:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   NOTA-ICON — shared Lucide SVG icon family.
   Replaces the old emoji + PNG mix. Icons use stroke=currentColor so
   they tint automatically with their parent's text colour.
   ═══════════════════════════════════════════════════════════════════ */

.nota-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Rail (desktop sidebar) — icons inherit a muted tone, brighten on hover/active */
.rail-tab .nota-icon {
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.15s;
}

.rail-tab:hover .nota-icon {
    color: rgba(255, 255, 255, 0.95);
}

.rail-tab.active .nota-icon {
    color: #a78bfa;
}

.nota.theme-light .rail-tab .nota-icon {
    color: rgba(0, 0, 0, 0.55);
}

.nota.theme-light .rail-tab:hover .nota-icon {
    color: rgba(0, 0, 0, 0.85);
}

.nota.theme-light .rail-tab.active .nota-icon {
    color: #7C3AED;
}

/* Mobile tab bar — muted default, accent when active */
.tab-item .nota-icon {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s;
}

.tab-item.active .nota-icon {
    color: #a78bfa;
}

.nota.theme-light .tab-item .nota-icon {
    color: rgba(0, 0, 0, 0.5);
}

.nota.theme-light .tab-item.active .nota-icon {
    color: #7C3AED;
}

/* Home hero action buttons */
.home-hero-action .nota-icon {
    color: rgba(255, 255, 255, 0.8);
}

.home-hero-action.danger .nota-icon {
    color: #fb7185;
}

.nota.theme-light .home-hero-action .nota-icon {
    color: rgba(0, 0, 0, 0.65);
}

/* Section header icons — small, sit inline with the label */
.home-sec-name .sec-ic {
    margin-right: 2px;
    opacity: 0.7;
    position: relative;
    top: -1px;
}

/* Calendar page inline icons (location pin, video, attendees) */
.cal-ic {
    opacity: 0.8;
    position: relative;
    top: -1px;
    margin-right: 1px;
}

/* Calendar preview card icon on home */
.home-cal-preview-icon .nota-icon {
    color: #a78bfa;
}

/* Calendar empty-state icon */
.cal-empty-icon .nota-icon {
    opacity: 0.4;
}

/* Topbar inbox button */
.topbar-btn .nota-icon {
    color: rgba(255, 255, 255, 0.75);
}

.nota.theme-light .topbar-btn .nota-icon {
    color: rgba(0, 0, 0, 0.6);
}

/* Calendar preview — quieter look when the week is empty */
.home-cal-preview.home-cal-preview-empty {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

    .home-cal-preview.home-cal-preview-empty .home-cal-preview-icon .nota-icon {
        color: rgba(255, 255, 255, 0.4);
    }

.nota.theme-light .home-cal-preview.home-cal-preview-empty {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

    .nota.theme-light .home-cal-preview.home-cal-preview-empty .home-cal-preview-icon .nota-icon {
        color: rgba(0, 0, 0, 0.35);
    }

/* ═══════════════════════════════════════════════════════════════════
   NOTEBOOK ICON PICKER — DARK THEME HARMONY
   The emoji stays (it's user personalisation, like Notion page icons) but
   the picker surfaces were hardcoded light (#F8F9FC etc), which made the
   New/Edit Notebook modals look like a different app on dark theme.
   ═══════════════════════════════════════════════════════════════════ */

.nota.theme-dark .icon-opt {
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
}

    .nota.theme-dark .icon-opt:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .nota.theme-dark .icon-opt.selected {
        border-color: #7C3AED;
        background: rgba(124, 58, 237, 0.18);
    }

.nota.theme-dark .icon-current-preview {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.nota.theme-dark .emoji-text-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.nota.theme-dark .btn-emoji-panel {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.35);
    color: #c4b5fd;
}

    .nota.theme-dark .btn-emoji-panel:hover {
        background: rgba(124, 58, 237, 0.25);
    }

/* Notebook list cards — let the accent tint carry the colour; emoji sits a
   touch smaller so it reads as a label, not a sticker */
.nav-nb-icon {
    font-size: 24px;
}

.nav-nb-dot {
    font-size: 20px;
}

/* Notebook icon picker — Lucide icon options */
.icon-opt .nota-icon {
    color: rgba(255, 255, 255, 0.75);
}

.icon-opt.selected .nota-icon {
    color: #a78bfa;
}

.nota.theme-light .icon-opt .nota-icon {
    color: rgba(0, 0, 0, 0.6);
}

.nota.theme-light .icon-opt.selected .nota-icon {
    color: #7C3AED;
}

/* Containers keep their accent tint; the SVG inherits via inline color style */
.nav-nb-icon .nota-icon,
.nav-nb-dot .nota-icon,
.home-row-icon .nota-icon,
.notif-item-icon .nota-icon {
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   ONENOTE GRAPH IMPORT — notebook/section picker tree
   ═══════════════════════════════════════════════════════════════════ */

.import-graph-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 8px;
    color: var(--n-text);
}

    .import-graph-card h3 {
        margin: 0 0 8px;
        font-size: 16px;
    }

.import-graph-sub {
    font-size: 13px;
    opacity: 0.75;
    margin: 0 0 14px;
    line-height: 1.5;
}

.onenote-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.onenote-nb-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 9px;
    color: var(--n-text);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s;
}

    .onenote-nb-head:hover {
        background: rgba(255, 255, 255, 0.07);
    }

.onenote-chev {
    width: 14px;
    opacity: 0.6;
    font-size: 11px;
}

.onenote-sections {
    padding: 4px 0 8px 34px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onenote-sec {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.12s;
}

    .onenote-sec:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .onenote-sec input[type="checkbox"] {
        accent-color: #7C3AED;
        width: 15px;
        height: 15px;
    }

.import-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.85;
}

.import-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
}

    .import-divider::before, .import-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
    }

.nota.theme-light .import-graph-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

.nota.theme-light .onenote-nb-head {
    background: rgba(0,0,0,0.03);
}

    .nota.theme-light .onenote-nb-head:hover {
        background: rgba(0,0,0,0.06);
    }

.nota.theme-light .onenote-sec:hover {
    background: rgba(0,0,0,0.04);
}

.nota.theme-light .import-divider {
    color: rgba(0,0,0,0.4);
}

    .nota.theme-light .import-divider::before, .nota.theme-light .import-divider::after {
        background: rgba(0,0,0,0.1);
    }

/* ═══ Import page — the missing wrapper rule ═══
   .import-body already has flex:1 + overflow-y:auto, but without the page
   being a height-constrained flex column that never engages, so long
   content (the OneNote section tree) ran off-screen unscrollably. */
.import-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}

/* Mobile: keep the bottom clear of the tab bar */
.nota.compact .import-body {
    padding-bottom: 130px;
}

/* OneNote import — notebook-level select-all checkbox */
.onenote-nb-checkall {
    accent-color: #7C3AED;
    width: 15px;
    height: 15px;
    margin: 0 2px 0 0;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   PERSISTENT DESKTOP SIDEBAR — search / notebooks tree / pinned / tags
   ═══════════════════════════════════════════════════════════════════ */

.nota-sidebar {
    width: 252px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.025);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    height: 100%;
    overflow: hidden;
}

/* Search */
.sb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 12px 8px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.sb-search-ic {
    color: rgba(255, 255, 255, 0.45);
}

.sb-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--n-text);
    font-size: 13.5px;
    font-family: inherit;
}

    .sb-search-input::placeholder {
        color: rgba(255, 255, 255, 0.35);
    }

/* Scrollable middle */
.sb-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 12px;
}

/* Groups */
.sb-group {
    margin-top: 14px;
}

.sb-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 6px;
}

.sb-group-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.sb-group-add {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    display: flex;
    align-items: center;
}

    .sb-group-add:hover {
        color: #a78bfa;
        background: rgba(124, 58, 237, 0.15);
    }

/* Notebook rows */
.sb-nb-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}

    .sb-nb-row:hover {
        background: rgba(255, 255, 255, 0.06);
    }

.sb-chev {
    width: 12px;
    font-size: 10px;
    opacity: 0.5;
    flex-shrink: 0;
}

.sb-nb-ic {
    display: flex;
    flex-shrink: 0;
}

.sb-nb-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--n-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-lock {
    font-size: 11px;
    opacity: 0.6;
}

.sb-nb-actions {
    display: none;
    gap: 2px;
}

.sb-nb-row:hover .sb-nb-actions {
    display: flex;
}

.sb-act {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    padding: 2px 4px;
    border-radius: 5px;
}

    .sb-act:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }

    .sb-act.danger:hover {
        color: #fb7185;
        background: rgba(239, 68, 68, 0.15);
    }

/* Sections under an expanded notebook */
.sb-secs {
    padding: 1px 0 4px 26px;
}

.sb-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
}

    .sb-sec:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .sb-sec.active {
        background: rgba(124, 58, 237, 0.18);
    }

.sb-sec-bar {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.sb-sec-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-sec.active .sb-sec-title {
    color: #fff;
}

.sb-sec-count {
    font-size: 11px;
    opacity: 0.45;
}

.sb-add-sec {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    padding: 5px 8px;
    border-radius: 7px;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

    .sb-add-sec:hover {
        color: #a78bfa;
        background: rgba(124, 58, 237, 0.1);
    }

/* Pinned */
.sb-pin {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
}

    .sb-pin:hover {
        background: rgba(255, 255, 255, 0.05);
    }

.sb-pin-ic {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.sb-pin-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tags */
.sb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px;
}

.sb-tag {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}

    .sb-tag:hover {
        background: rgba(124, 58, 237, 0.2);
        border-color: rgba(124, 58, 237, 0.4);
        color: #c4b5fd;
    }

/* New Note — pinned to the bottom */
.sb-new-note {
    margin: 10px 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.12s;
}

    .sb-new-note:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
    }

/* Light theme */
.nota.theme-light .nota-sidebar {
    background: rgba(0,0,0,0.02);
    border-right-color: rgba(0,0,0,0.08);
}

.nota.theme-light .sb-search {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}

.nota.theme-light .sb-search-ic {
    color: rgba(0,0,0,0.4);
}

.nota.theme-light .sb-search-input::placeholder {
    color: rgba(0,0,0,0.35);
}

.nota.theme-light .sb-group-label {
    color: rgba(0,0,0,0.45);
}

.nota.theme-light .sb-nb-row:hover {
    background: rgba(0,0,0,0.05);
}

.nota.theme-light .sb-sec:hover {
    background: rgba(0,0,0,0.04);
}

.nota.theme-light .sb-sec.active {
    background: rgba(124, 58, 237, 0.12);
}

.nota.theme-light .sb-sec-title {
    color: rgba(0,0,0,0.75);
}

.nota.theme-light .sb-sec.active .sb-sec-title {
    color: #4F46E5;
}

.nota.theme-light .sb-pin-title {
    color: rgba(0,0,0,0.75);
}

.nota.theme-light .sb-pin-ic {
    color: rgba(0,0,0,0.45);
}

.nota.theme-light .sb-act {
    color: rgba(0,0,0,0.5);
}

    .nota.theme-light .sb-act:hover {
        color: #000;
        background: rgba(0,0,0,0.08);
    }

.nota.theme-light .sb-tag {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.7);
}

/* Sidebar search clear */
.sb-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    padding: 0 2px;
    flex-shrink: 0;
}

    .sb-search-clear:hover {
        color: #fff;
    }

.nota.theme-light .sb-search-clear {
    color: rgba(0,0,0,0.4);
}

    .nota.theme-light .sb-search-clear:hover {
        color: #000;
    }

/* Home background — flat. The radial purple blobs were the backdrop for the
   floating notes; with those gone the gradient just looked like a stain. */
.home-animated-bg {
    background: transparent !important;
    background-image: none !important;
}

/* Quick notes — professional rows (post-it treatment retired) */
.qn-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--n-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 40%;
}

.qn-row-preview {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nota.theme-light .qn-row-preview {
    color: rgba(0,0,0,0.45);
}

/* Quick notes section header — title is a link to the full section */
.home-sec-name-link {
    cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════════════
   TASK LIST — tick-box checklists inside notes (TipTap TaskList/TaskItem)
   ═══════════════════════════════════════════════════════════════════ */
.ProseMirror ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
    margin: 0.4em 0;
}

    .ProseMirror ul[data-type="taskList"] li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin: 3px 0;
    }

        .ProseMirror ul[data-type="taskList"] li > label {
            flex-shrink: 0;
            margin-top: 2px;
            user-select: none;
        }

        .ProseMirror ul[data-type="taskList"] li > div {
            flex: 1;
            min-width: 0;
        }

            .ProseMirror ul[data-type="taskList"] li > div > p {
                margin: 0;
            }

    .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255, 255, 255, 0.35);
        border-radius: 5px;
        background: transparent;
        cursor: pointer;
        position: relative;
        transition: background 0.12s, border-color 0.12s;
    }

        .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:hover {
            border-color: #a78bfa;
        }

        .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked {
            background: #7C3AED;
            border-color: #7C3AED;
        }

            .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                left: 5px;
                top: 1px;
                width: 4px;
                height: 9px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

    .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
        opacity: 0.55;
        text-decoration: line-through;
    }

.nota.theme-light .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
    border-color: rgba(0, 0, 0, 0.3);
}

    .nota.theme-light .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked {
        background: #4F46E5;
        border-color: #4F46E5;
    }

    .home-sec-name-link:hover {
        color: #a78bfa;
    }

.nota.theme-light .home-sec-name-link:hover {
    color: #7C3AED;
}

/* Active-editor avatar(s) moved to the right of the toolbar, after the pin,
   vertically centred in the bar. */
.toolbar-right .active-editors-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

    .toolbar-right .active-editors-right .active-editor-avatar {
        width: 28px;
        height: 28px;
    }


/* ─── Editor toolbar: avatar on the right + breadcrumb breathing room ─── */

/* Active-editor avatar(s) now live in toolbar-right, after the pin.
   Centre them vertically in the 48px toolbar. */
.toolbar-right .active-editors-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

    .toolbar-right .active-editors-right .active-editor-avatar {
        width: 28px;
        height: 28px;
        margin-left: 0;
    }

/* The breadcrumb row was getting clipped at the very top edge. Give the
   editor-toolbar a little vertical padding and let it size to content so
   nothing touches the panel's top border. */
.editor-toolbar {
    min-height: 48px;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    box-sizing: border-box;
}