/* ========================================
   CHARM — Notes App Website
   Single-view, light/dark, responsive
   ======================================== */

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Theme tokens ---- */
:root {
    --cyan: #00d4aa;
    --blue: #4a9eff;
    --purple: #a855f7;
    --cyan-glow: rgba(0, 212, 170, 0.45);
    --blue-glow: rgba(74, 158, 255, 0.45);
    --purple-glow: rgba(168, 85, 247, 0.45);
    --cyan-glow-soft: rgba(0, 212, 170, 0.12);
    --blue-glow-soft: rgba(74, 158, 255, 0.12);
    --purple-glow-soft: rgba(168, 85, 247, 0.12);

    /* Light theme */
    --app-bg: rgba(255, 255, 255, 0.82);
    --app-border: rgba(0, 0, 0, 0.12);
    --app-shadow: 0 20px 80px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    --sidebar-bg: rgba(246, 244, 241, 0.65);
    --sidebar-border: rgba(0, 0, 0, 0.06);
    --sidebar-active: rgba(59, 130, 245, 0.1);
    --sidebar-active-border: rgba(59, 130, 245, 0.35);
    --titlebar-bg: rgba(246, 244, 241, 0.45);
    --toolbar-bg: rgba(246, 244, 241, 0.55);
    --toolbar-border: rgba(0, 0, 0, 0.06);
    --editor-bg: rgba(255, 255, 255, 0.95);
    --statusbar-bg: rgba(246, 244, 241, 0.5);
    --text-1: #1a1a1a;
    --text-2: #555;
    --text-3: #999;
    --text-ghost: rgba(0, 0, 0, 0.15);
    --divider: rgba(0, 0, 0, 0.08);
    --callout-bg: rgba(59, 130, 245, 0.06);
    --callout-border: rgba(59, 130, 245, 0.2);
    --callout-subtle-bg: rgba(0, 0, 0, 0.03);
    --callout-subtle-border: rgba(0, 0, 0, 0.08);
    --quote-border: #e8c44a;
    --quote-bg: rgba(232, 196, 74, 0.06);
    --receipt-bg: rgba(0, 0, 0, 0.02);
    --receipt-border: rgba(0, 0, 0, 0.08);
    --table-header-bg: rgba(0, 0, 0, 0.03);
    --table-border: rgba(0, 0, 0, 0.08);
    --charm-col-bg: rgba(168, 85, 247, 0.04);
    --cta-bg: #1a1a1a;
    --cta-text: #fff;
    --kbd-bg: rgba(0, 0, 0, 0.06);
    --kbd-border: rgba(0, 0, 0, 0.12);
    --step-bg: rgba(0, 0, 0, 0.04);
    --faq-hover: rgba(0, 0, 0, 0.03);
    --check-color: #34C759;
    --tag-border-radius: 4px;
    --tb-hover: rgba(0, 0, 0, 0.06);
    --tb-active: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --app-bg: rgba(50, 52, 60, 0.72);
    --app-border: rgba(255, 255, 255, 0.1);
    --app-shadow: 0 20px 80px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
    --sidebar-bg: rgba(255, 255, 255, 0.04);
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(100, 160, 255, 0.15);
    --sidebar-active-border: rgba(100, 160, 255, 0.35);
    --titlebar-bg: rgba(255, 255, 255, 0.06);
    --toolbar-bg: rgba(255, 255, 255, 0.06);
    --toolbar-border: rgba(255, 255, 255, 0.06);
    --editor-bg: rgba(20, 25, 40, 0.75);
    --statusbar-bg: rgba(255, 255, 255, 0.04);
    --text-1: rgba(255, 255, 255, 0.92);
    --text-2: rgba(255, 255, 255, 0.55);
    --text-3: rgba(255, 255, 255, 0.35);
    --text-ghost: rgba(255, 255, 255, 0.08);
    --divider: rgba(255, 255, 255, 0.08);
    --callout-bg: rgba(100, 160, 255, 0.08);
    --callout-border: rgba(100, 160, 255, 0.2);
    --callout-subtle-bg: rgba(255, 255, 255, 0.04);
    --callout-subtle-border: rgba(255, 255, 255, 0.08);
    --quote-border: #c8a83a;
    --quote-bg: rgba(200, 168, 58, 0.06);
    --receipt-bg: rgba(255, 255, 255, 0.03);
    --receipt-border: rgba(255, 255, 255, 0.08);
    --table-header-bg: rgba(255, 255, 255, 0.04);
    --table-border: rgba(255, 255, 255, 0.08);
    --charm-col-bg: rgba(168, 85, 247, 0.06);
    --cta-bg: #fff;
    --cta-text: #1a1a1a;
    --kbd-bg: rgba(255, 255, 255, 0.08);
    --kbd-border: rgba(255, 255, 255, 0.15);
    --step-bg: rgba(255, 255, 255, 0.04);
    --faq-hover: rgba(255, 255, 255, 0.04);
    --check-color: #30D158;
    --tb-hover: rgba(255, 255, 255, 0.08);
    --tb-active: rgba(255, 255, 255, 0.12);
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
}


/* ---- Background ---- */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
}

#bgCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

[data-theme="dark"] .aurora { opacity: 1; }

.aurora-curtain {
    position: absolute;
    width: 140%;
    filter: blur(50px);
}

.aurora-curtain:nth-child(1) {
    bottom: -10%;
    left: -20%;
    height: 60%;
    opacity: 0.35;
    background: radial-gradient(ellipse 80% 50% at 35% 70%, rgba(0, 220, 160, 0.5), transparent 70%),
                radial-gradient(ellipse 60% 40% at 65% 80%, rgba(0, 180, 140, 0.3), transparent 65%);
    animation: auroraDrift1 20s ease-in-out infinite;
}

.aurora-curtain:nth-child(2) {
    bottom: 0%;
    left: -10%;
    height: 55%;
    opacity: 0.3;
    background: radial-gradient(ellipse 70% 45% at 55% 65%, rgba(80, 140, 255, 0.4), transparent 65%),
                radial-gradient(ellipse 50% 35% at 30% 75%, rgba(100, 160, 255, 0.25), transparent 60%);
    animation: auroraDrift2 25s ease-in-out infinite;
}

.aurora-curtain:nth-child(3) {
    bottom: -5%;
    left: -15%;
    height: 50%;
    opacity: 0.35;
    background: radial-gradient(ellipse 65% 40% at 70% 75%, rgba(160, 80, 240, 0.45), transparent 65%),
                radial-gradient(ellipse 55% 35% at 40% 85%, rgba(200, 100, 255, 0.2), transparent 60%);
    animation: auroraDrift3 30s ease-in-out infinite;
}


/* ---- Notes App ---- */
.notes-app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 64px);
    height: calc(100% - 64px);
    margin: 32px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(50px) saturate(1.4);
    -webkit-backdrop-filter: blur(50px) saturate(1.4);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 2px 8px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.04),
        0 24px 60px rgba(0,0,0,0.05);
    animation: appEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(12px) scale(0.998);
}

[data-theme="dark"] .notes-app {
    background: rgba(20, 20, 26, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.2),
        0 24px 60px rgba(0,0,0,0.3);
}

@keyframes appEntrance {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* ---- Titlebar ---- */
.titlebar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    user-select: none;
}

[data-theme="dark"] .titlebar {
    background: var(--titlebar-bg);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.titlebar-left {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 80px;
}

.traffic-lights { display: flex; gap: 8px; margin-right: 16px; }
.tl { width: 10px; height: 10px; border-radius: 50%; position: relative; transition: filter 0.15s ease; }
.tl:hover { filter: brightness(1.1); }
.tl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -0.5px 1px rgba(0,0,0,0.1); }
.tl-close { background: #FF5F57; }
.tl-mini { background: #FEBC2E; }
.tl-expand { background: #28C840; }

/* Mobile card header (hidden on desktop) */
.mobile-card-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(246, 244, 241, 0.7);
    border-bottom: 1px solid var(--divider);
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
}

[data-theme="dark"] .mobile-card-header {
    background: rgba(30, 35, 50, 0.7);
}

.mobile-card-menu,
.mobile-card-theme {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    transition: background 0.15s ease;
}

.mobile-card-menu:hover,
.mobile-card-theme:hover { background: var(--tb-hover); }

.mobile-card-menu svg { width: 18px; height: 18px; }
.mobile-card-theme svg { width: 16px; height: 16px; }

.mobile-card-title {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-1);
}

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-2);
    border-radius: 6px;
    transition: background 0.15s ease;
}

.mobile-menu-btn:hover { background: var(--tb-hover); }
.mobile-menu-btn svg { width: 18px; height: 18px; }

.drawer-backdrop { display: none; }

/* Mobile bottom nav (hidden on desktop) */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 50;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Back arrow - small, subtle */
/* Back button - glass pill */
.mobile-nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    color: var(--text-2);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    flex: 1;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease, background 0.2s ease;
    padding: 0 14px;
    height: 44px;
}

.mobile-nav-back:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.mobile-nav-back:active { transform: scale(0.95); }

.mobile-nav-back svg { width: 12px; height: 12px; flex-shrink: 0; }

[data-theme="dark"] .mobile-nav-back {
    background: rgba(40, 45, 65, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .mobile-nav-back:hover {
    background: rgba(50, 55, 75, 0.85);
}

/* Next button - prominent glass pill */
.mobile-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    height: 44px;
    flex: 3;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-1);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.mobile-nav-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.mobile-nav-btn:active { transform: scale(0.97); }

[data-theme="dark"] .mobile-nav-btn {
    background: rgba(40, 45, 65, 0.8);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .mobile-nav-btn:hover {
    background: rgba(50, 55, 75, 0.9);
}

.mobile-nav-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    flex-shrink: 0;
}

.mobile-nav-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

.mobile-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
}

.mobile-nav-dot.active {
    background: var(--blue);
    transform: scale(1.3);
}

[data-theme="dark"] .mobile-nav-dot {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .mobile-nav-dot.active {
    background: var(--blue);
}

.back-btn {
    display: none;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    padding: 2px 4px;
}

.back-btn svg { width: 18px; height: 18px; stroke: var(--blue); }

.titlebar-center {
    flex: 1;
    text-align: center;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .titlebar-center { color: rgba(255,255,255,0.4); }

.titlebar-right {
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.titlebar-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-3);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.titlebar-social:hover {
    color: var(--text-1);
    background: var(--tb-hover);
}

.titlebar-cta {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--check-color);
    text-decoration: none;
    background: rgba(52, 199, 89, 0.06);
    border: 1px solid rgba(52, 199, 89, 0.2);
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.titlebar-cta:hover {
    background: rgba(52, 199, 89, 0.12);
    border-color: rgba(52, 199, 89, 0.35);
    box-shadow: 0 0 12px rgba(52, 199, 89, 0.1);
    text-decoration: none;
}

[data-theme="dark"] .titlebar-cta {
    color: #7ba4d9;
    background: rgba(90, 140, 210, 0.08);
    border-color: rgba(90, 140, 210, 0.25);
}

[data-theme="dark"] .titlebar-cta:hover {
    background: rgba(90, 140, 210, 0.15);
    border-color: rgba(90, 140, 210, 0.4);
    box-shadow: 0 0 12px rgba(90, 140, 210, 0.12);
}

.theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    transition: background 0.15s ease, color 0.15s ease;
}

.theme-btn:hover { background: var(--tb-hover); color: var(--text-2); }
.theme-btn svg { width: 16px; height: 16px; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }


/* ---- App body ---- */
.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}


/* ---- Sidebar ---- */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    padding: 16px 0;
    border-right: 0.5px solid rgba(0,0,0,0.06);
    background: rgba(245, 243, 240, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

[data-theme="dark"] .sidebar {
    border-right-color: rgba(255,255,255,0.04);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* Style native scrollbars to be thin and themed */
.notes-list,
.note-scroll,
.blog-sidebar,
.article-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

[data-theme="dark"] .notes-list,
[data-theme="dark"] .note-scroll,
[data-theme="dark"] .blog-sidebar,
[data-theme="dark"] .article-scroll {
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.notes-list::-webkit-scrollbar,
.note-scroll::-webkit-scrollbar {
    width: 6px;
}

.notes-list::-webkit-scrollbar-track,
.note-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.notes-list::-webkit-scrollbar-thumb,
.note-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

[data-theme="dark"] .notes-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .note-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}

.notes-list {
    padding: 0;
    flex: 1;
    overflow-y: auto;
}

.note-item {
    padding: 12px 14px;
    margin: 0 8px;
    border-radius: 10px;
    cursor: pointer;
    border-left: none;
    transition: background 0.12s ease;
}

.note-item:hover { background: rgba(0,0,0,0.02); }
.note-item.active { background: rgba(0,0,0,0.035); }

[data-theme="dark"] .note-item:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .note-item.active { background: rgba(255,255,255,0.05); }

.note-item-title {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0,0,0,0.7);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .note-item-title { color: rgba(255,255,255,0.7); }

.note-item-date {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 11px;
    color: rgba(0,0,0,0.35);
}

[data-theme="dark"] .note-item-date { color: rgba(255,255,255,0.3); }

.note-item-sub {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 11px;
    color: rgba(0,0,0,0.3);
    margin-top: 2px;
}

[data-theme="dark"] .note-item-sub { color: rgba(255,255,255,0.25); }

.note-item-tags {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.ntag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ntag-cyan { background: rgba(0, 212, 170, 0.12); color: #00b894; }
.ntag-blue { background: rgba(74, 158, 255, 0.12); color: #3d8bde; }
.ntag-purple { background: rgba(168, 85, 247, 0.12); color: #9654e0; }
.ntag-gold { background: rgba(220, 180, 60, 0.12); color: #b8960a; }
.ntag-green { background: rgba(52, 199, 89, 0.12); color: #28a745; }
.ntag-orange { background: rgba(255, 160, 40, 0.12); color: #d48a06; }
.ntag-gray { background: rgba(0, 0, 0, 0.05); color: rgba(0,0,0,0.35); }

[data-theme="dark"] .ntag-cyan { background: rgba(0, 212, 170, 0.15); color: #5eecc8; }
[data-theme="dark"] .ntag-blue { background: rgba(74, 158, 255, 0.15); color: #6eadff; }
[data-theme="dark"] .ntag-purple { background: rgba(168, 85, 247, 0.15); color: #bf8cfa; }
[data-theme="dark"] .ntag-gold { background: rgba(220, 180, 60, 0.15); color: #e8c84a; }
[data-theme="dark"] .ntag-green { background: rgba(52, 199, 89, 0.15); color: #4ade80; }
[data-theme="dark"] .ntag-orange { background: rgba(255, 160, 40, 0.15); color: #f5a623; }
[data-theme="dark"] .ntag-gray { background: rgba(255, 255, 255, 0.06); color: rgba(255,255,255,0.3); }


/* ---- Editor panel — solid white ---- */
.editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .editor {
    background: rgba(18, 20, 28, 0.95);
}


/* ---- Toolbar ---- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 16px;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
    flex-shrink: 0;
    user-select: none;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.toolbar::-webkit-scrollbar { display: none; }

/* Hide native scrollbar, use custom JS scrollbar */
.custom-scroll {
    overflow: hidden !important;
    position: relative;
}

.custom-scroll-inner {
    overflow-y: scroll;
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.custom-scroll-inner::-webkit-scrollbar {
    display: none;
}

.custom-scrollbar {
    position: absolute;
    top: 4px;
    right: 2px;
    bottom: 4px;
    width: 5px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-scroll:hover .custom-scrollbar,
.custom-scrollbar.visible {
    opacity: 1;
}

.custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    min-height: 30px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease;
    pointer-events: auto;
    cursor: default;
}

.custom-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .custom-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .custom-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

[data-theme="dark"] .toolbar { border-bottom-color: rgba(255,255,255,0.06); }

.tb-group { display: flex; align-items: center; gap: 1px; }

.tb {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,0.38);
    transition: background 0.1s ease, color 0.1s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.tb:hover { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.6); }
.tb:active { background: rgba(0,0,0,0.06); transform: scale(0.96); transition-duration: 50ms; }
.tb.active { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.7); }
.tb svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb strong { font-weight: 700; }
.tb em { font-style: italic; font-weight: 500; }

[data-theme="dark"] .tb { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .tb:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
[data-theme="dark"] .tb:active { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .tb.active { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

.tb-select {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: transparent;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,0.38);
    cursor: pointer;
    transition: background 0.1s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.tb-select:hover { background: rgba(0,0,0,0.04); }
.tb-select .chevron { width: 8px; height: 8px; stroke: currentColor; fill: none; stroke-width: 2.5; opacity: 0.35; }

[data-theme="dark"] .tb-select { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .tb-select:hover { background: rgba(255,255,255,0.06); }

.tb-div { width: 1px; height: 20px; background: rgba(0,0,0,0.06); margin: 0 5px; flex-shrink: 0; }
[data-theme="dark"] .tb-div { background: rgba(255,255,255,0.06); }

.tb-fontsize { display: flex; align-items: center; flex-shrink: 0; }
.tb-fontsize .tb { min-width: 26px; font-size: 14px; color: rgba(0,0,0,0.3); }
[data-theme="dark"] .tb-fontsize .tb { color: rgba(255,255,255,0.25); }
.tb-fontsize .size-value {
    min-width: 32px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 12px; font-weight: 500; color: rgba(0,0,0,0.45);
    background: rgba(0,0,0,0.025); border-radius: 4px;
    border: 0.5px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .tb-fontsize .size-value {
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.tb-color-text { position: relative; font-size: 15px; font-weight: 700; }
.tb-color-text::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 12px; height: 3px; border-radius: 1px; }
.tb-text-color::after { background: rgba(0,0,0,0.7); }
.tb-highlight::after { background: hsl(48, 95%, 60%); }
[data-theme="dark"] .tb-text-color::after { background: rgba(255,255,255,0.7); }

.tb-spacer { flex: 1; }
.toolbar-meta { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 11px; color: rgba(0,0,0,0.18); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .toolbar-meta { color: rgba(255,255,255,0.15); }


/* ---- Note panels ---- */
.note-panels {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.note-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.note-panel.active {
    opacity: 1;
    pointer-events: auto;
}

.note-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.note-body {
    max-width: 860px;
    margin: 0;
    padding: 32px 48px 80px;
}


/* ---- Hero focus: soft opaque overlay ---- */
.hero-frost {
    position: absolute;
    inset: 0;
    background: rgba(245, 243, 240, 0.85);
    z-index: 50;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .hero-frost {
    background: rgba(28, 28, 32, 0.85);
}

.notes-app.hero-done .hero-frost {
    opacity: 0;
    pointer-events: none;
}

.sidebar { position: relative; }
.toolbar { position: relative; }
.titlebar { position: relative; }

/* ---- Status bar ---- */
.statusbar {
    display: none;
}


/* ================================================
   NOTE CONTENT STYLES
   ================================================ */

.note-title {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 6px;
    text-wrap: balance;
    display: flex;
    align-items: center;
    gap: 10px;
}

.note-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.note-meta {
    font-size: 0.85rem;
    color: var(--text-3);
    margin-bottom: 28px;
}

/* (dividers removed - spacing handled by margins) */

.note-h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 12px;
}

.note-body p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: 12px;
    text-wrap: pretty;
}

.note-body a { color: var(--blue); text-decoration: none; }
.note-body a:hover { text-decoration: underline; }

kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.8em;
    font-family: 'SF Mono', Menlo, monospace;
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    border-radius: 3px;
}


/* ---- Rich note formatting (Apple Notes style) ---- */
.note-h1 {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 28px 0 8px;
    line-height: 1.3;
}

.note-h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 24px 0 8px;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.note-h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin: 26px 0 8px;
}

.note-mono {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.82em;
    background: var(--kbd-bg);
    padding: 1px 5px;
    border-radius: 3px;
}

.note-highlight {
    background: rgba(255, 230, 100, 0.25);
    padding: 0 3px;
    border-radius: 2px;
}

[data-theme="dark"] .note-highlight {
    background: rgba(255, 230, 100, 0.12);
}

.note-bold { font-weight: 700; color: var(--text-1); }
.note-italic { font-style: italic; }
.note-underline { text-decoration: underline; text-underline-offset: 2px; }

/* Launch price strikethrough + highlight */
.price-was {
    text-decoration: line-through;
    color: var(--text-3);
    font-weight: 400;
    opacity: 0.6;
}

.price-now {
    background: rgba(52, 199, 89, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    margin-left: 4px;
}

.price-launch {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #d48a06;
    background: rgba(220, 160, 40, 0.1);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Coloured highlighters */
.hl-yellow { background: rgba(255, 230, 100, 0.3); padding: 0 3px; border-radius: 2px; }
.hl-green { background: rgba(52, 199, 89, 0.15); padding: 0 3px; border-radius: 2px; }
.hl-blue { background: rgba(74, 158, 255, 0.15); padding: 0 3px; border-radius: 2px; }
.hl-pink { background: rgba(255, 100, 130, 0.15); padding: 0 3px; border-radius: 2px; }
.hl-purple { background: rgba(168, 85, 247, 0.12); padding: 0 3px; border-radius: 2px; }
[data-theme="dark"] .hl-yellow { background: rgba(255, 230, 100, 0.12); }
[data-theme="dark"] .hl-green { background: rgba(52, 199, 89, 0.1); }
[data-theme="dark"] .hl-blue { background: rgba(74, 158, 255, 0.1); }
[data-theme="dark"] .hl-pink { background: rgba(255, 100, 130, 0.1); }
[data-theme="dark"] .hl-purple { background: rgba(168, 85, 247, 0.08); }

/* Coloured underlines */
.note-underline-cyan { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 2px; }
.note-underline-blue { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 2px; }
.note-underline-purple { text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 2px; }
.note-underline-green { text-decoration: underline; text-decoration-color: #34C759; text-underline-offset: 2px; }

/* Strikethrough with correction */
.note-struck { text-decoration: line-through; color: var(--text-3); }

/* Inline badge/chip */
.note-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}
.note-badge-green { background: rgba(52, 199, 89, 0.12); color: #34C759; }
.note-badge-blue { background: rgba(74, 158, 255, 0.12); color: var(--blue); }
.note-badge-gold { background: rgba(232, 196, 74, 0.15); color: #c8a020; }
[data-theme="dark"] .note-badge-gold { color: #e8c44a; }

/* Key-value pairs */
.note-kv {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--divider);
    font-size: 0.88rem;
}
.note-kv:last-child { border-bottom: none; }
.note-kv-label { color: var(--text-2); }
.note-kv-value { font-weight: 600; color: var(--text-1); }

/* Section header with accent */
.note-section {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-1);
    margin: 24px 0 10px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tip/important callouts */
.note-tip {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 12px 0;
    background: rgba(74, 158, 255, 0.06);
    border: 1px solid rgba(74, 158, 255, 0.15);
}
[data-theme="dark"] .note-tip { background: rgba(74, 158, 255, 0.06); border-color: rgba(74, 158, 255, 0.12); }

.note-important {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 12px 0;
    background: rgba(255, 100, 100, 0.06);
    border: 1px solid rgba(255, 100, 100, 0.15);
}

/* Cross-reference */
.note-ref {
    font-size: 0.78rem;
    color: var(--blue);
    cursor: pointer;
    font-style: italic;
}
.note-ref:hover { text-decoration: underline; }

/* Inline annotation/margin note */
.note-annotation {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--text-3);
    font-style: italic;
    margin-left: 4px;
    vertical-align: super;
}

/* FAQ category header */
/* FAQ category groups */
.faq-group {
    margin-bottom: 24px;
}

.faq-group:first-child { margin-top: 0; }

/* Very subtle colour tints on FAQ items - mostly grey with a hint */
.faq-group-compatibility .faq-item { background: rgba(0, 212, 170, 0.015); }
.faq-group-how .faq-item { background: rgba(168, 85, 247, 0.015); }
.faq-group-privacy .faq-item { background: rgba(52, 199, 89, 0.015); }
.faq-group-licensing .faq-item { background: rgba(232, 196, 74, 0.015); }

[data-theme="dark"] .faq-group-compatibility .faq-item { background: rgba(0, 212, 170, 0.025); }
[data-theme="dark"] .faq-group-how .faq-item { background: rgba(168, 85, 247, 0.025); }
[data-theme="dark"] .faq-group-privacy .faq-item { background: rgba(52, 199, 89, 0.025); }
[data-theme="dark"] .faq-group-licensing .faq-item { background: rgba(232, 196, 74, 0.025); }

.faq-category {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin: 0 0 10px;
    padding-left: 0;
}

.faq-category:first-child { margin-top: 0; }

/* Two-column layout */
.note-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 16px 0;
}

@media (max-width: 600px) {
    .note-columns { grid-template-columns: 1fr; }
}

/* Checklist */
.note-checklist {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.note-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--text-2);
    border-bottom: 1px solid var(--divider);
}

.note-checklist li:last-child { border-bottom: none; }

.note-check {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-check.checked { background: var(--check-color); }
.note-check.checked::after { content: '✓'; color: #fff; font-size: 0.6rem; font-weight: 700; }
.note-check.unchecked { background: none; border: 1.5px solid var(--divider); }

/* Numbered list */
.note-numbered {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    counter-reset: note-step;
}

.note-numbered li {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.6;
    counter-increment: note-step;
}

.note-numbered li::before {
    content: counter(note-step);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--step-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-2);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Color swatch inline */
.color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 3px;
}

/* Inline stat/metric */
.note-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    border-radius: 10px;
    margin: 4px;
}

.note-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.2;
}

.note-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.note-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0;
}

/* Feature row (icon + text side by side) */
.feature-row {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    border-radius: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.feature-row-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.feature-row-text { flex: 1; }

.feature-row-text h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-row-text p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-2);
    margin-bottom: 0;
}

/* ---- Feature cards (What It Does note) ---- */
.note-card {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--callout-subtle-border);
    background: var(--callout-subtle-bg);
    margin-bottom: 16px;
}

.note-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.note-card-icon { width: 36px; height: 36px; border-radius: 9px; outline: 1px solid rgba(0, 0, 0, 0.06); outline-offset: -1px; }
.note-card-name { margin-bottom: 6px; }
.note-card-title { font-size: 0.95rem; font-weight: 600; color: var(--text-1); }

.note-card p { font-size: 0.85rem; margin-bottom: 10px; }

/* Inline before/after examples */
.note-example {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--receipt-bg);
    border: 1px solid var(--divider);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    margin-top: 8px;
    flex-wrap: wrap;
}

.example-before {
    text-decoration: line-through;
    color: var(--text-3);
    opacity: 0.7;
}

.example-arrow { color: var(--text-3); font-size: 0.8rem; }

.example-after { font-weight: 500; }
.example-cyan  { color: var(--cyan); }
.example-blue  { color: var(--blue); }
.example-purple { color: var(--purple); }

.example-hint {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-3);
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: auto;
}

.note-underline-cyan { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
.note-underline-blue { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; }
.note-underline-purple { text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 3px; }


/* ---- Step cards (How It Works note) ---- */
.note-step-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    margin-bottom: 12px;
}

.note-step-card .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--text-1);
    color: var(--editor-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.note-step-card .step-body { flex: 1; }
.note-step-card .step-body .note-h3 { margin-top: 0; }
.note-step-card .step-body p { margin-bottom: 0; }


/* ---- Green/Gold callouts ---- */
.note-callout {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.callout-green {
    background: rgba(52, 199, 89, 0.06);
    border: 1px solid rgba(52, 199, 89, 0.18);
    color: var(--text-2);
}

.callout-gold {
    background: var(--quote-bg);
    border: 1px solid rgba(232, 196, 74, 0.2);
    color: var(--text-2);
}


/* ---- Quote grid (Kind Words note) ---- */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 700px) {
    .quote-grid { grid-template-columns: 1fr; }
}

.quote-card {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
}

.quote-card.quote-featured {
    grid-column: 1 / -1;
    background: var(--quote-bg);
}

.quote-text {
    font-size: 0.88rem;
    font-style: italic;
    color: var(--text-1);
    margin-bottom: 10px;
    line-height: 1.6;
}

.quote-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--step-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-3);
    flex-shrink: 0;
}

.quote-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-1);
    display: block;
}

.quote-role {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-3);
    display: block;
}

.quote-stars {
    color: #e8c44a;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.star-empty {
    opacity: 0.25;
}
.quote-flag { font-size: 0.9rem; margin-left: auto; }

/* ---- Tags ---- */
.tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--tag-border-radius);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tag-cyan { background: var(--cyan-glow-soft); color: var(--cyan); }
.tag-blue { background: var(--blue-glow-soft); color: var(--blue); }
.tag-purple { background: var(--purple-glow-soft); color: var(--purple); }


/* ---- Feature blocks ---- */
.feature-block { margin-bottom: 24px; }

.feature-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.feature-icon-img { width: 40px; height: 40px; border-radius: 10px; outline: 1px solid rgba(0, 0, 0, 0.06); outline-offset: -1px; }
.feature-name { margin-bottom: 4px; }
.feature-subtitle { font-size: 0.95rem; font-weight: 600; color: var(--text-1); }


/* ---- Mini demos ---- */
.note-demo {
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.92rem;
    margin-top: 12px;
    margin-bottom: 6px;
    overflow: hidden;
    isolation: isolate;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.note-demo .demo-glow {
    position: absolute; inset: -4px; border-radius: 12px;
    opacity: 0; filter: blur(8px); pointer-events: none;
    transition: opacity 0.3s ease;
}

.note-demo .demo-old { transition: opacity 0.2s ease, filter 0.2s ease; }

.note-demo .demo-new {
    opacity: 0; position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    filter: blur(3px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.note-demo .demo-new.active { opacity: 1; filter: blur(0); }

.particle-container { position: fixed; pointer-events: none; z-index: 9999; }
.particle { position: absolute; border-radius: 50%; pointer-events: none; }


/* ---- Callouts ---- */
.callout {
    padding: 16px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.6;
    margin-top: 8px;
    margin-bottom: 16px;
}

.callout-info {
    background: var(--callout-bg);
    border: 1px solid var(--callout-border);
    color: var(--text-2);
}

.callout-subtle {
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    color: var(--text-2);
}

.callout strong { color: var(--text-1); }


/* ---- App icon row ---- */
.app-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.mini-icon {
    font-size: 1.5rem;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
}


/* ---- Steps ---- */
.steps { display: flex; flex-direction: column; gap: 20px; }

.step { display: flex; gap: 14px; align-items: center; }

.step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--step-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    color: var(--text-2); flex-shrink: 0; margin-top: 2px;
}

.step-content h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.step-content p { font-size: 0.85rem; line-height: 1.6; color: var(--text-2); margin-bottom: 0; }


/* ---- Testimonials ---- */
.testimonial {
    padding: 14px 16px;
    border-left: 3px solid var(--quote-border);
    background: var(--quote-bg);
    border-radius: 0 8px 8px 0;
    margin-bottom: 14px;
}

.testimonial p {
    font-size: 0.9rem; line-height: 1.6;
    font-style: italic; color: var(--text-1); margin-bottom: 8px;
}

.testimonial cite {
    font-style: normal; font-size: 0.78rem;
    font-weight: 600; color: var(--text-2);
}

.cite-role { font-weight: 400; color: var(--text-3); }
.stars { color: #e8c44a; font-size: 0.7rem; letter-spacing: 1px; }


/* ---- Receipt ---- */
.receipt {
    background: var(--receipt-bg);
    border: 1px solid var(--receipt-border);
    border-radius: 12px;
    padding: 28px 24px;
    max-width: 360px;
    margin: 0 auto 24px;
}

.receipt-header { text-align: center; margin-bottom: 16px; }
.receipt-logo { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 8px; outline: 1px solid rgba(0, 0, 0, 0.06); outline-offset: -1px; }
.receipt-brand { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 1.2rem; margin-bottom: 2px; }
.receipt-tagline { font-size: 0.78rem; color: var(--text-3); }
.receipt-line { height: 1px; background: var(--divider); margin: 14px 0; }
.receipt-row { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--text-2); }

.receipt-includes { display: flex; flex-direction: column; gap: 6px; }

.checklist-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem; color: var(--text-2);
}

.check-box {
    width: 16px; height: 16px; border-radius: 4px;
    background: var(--check-color);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.check-box::after { content: '✓'; color: #fff; font-size: 0.65rem; font-weight: 700; }

.receipt-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }

.receipt-amount {
    font-size: 1.4rem; font-weight: 700;
    background: linear-gradient(120deg, var(--cyan), var(--blue), var(--purple));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holoShimmer 3s ease-in-out infinite;
}

.receipt-once { text-align: right; font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }

.receipt-cta {
    display: block; text-align: center;
    padding: 12px 24px;
    background: var(--cta-bg); color: var(--cta-text);
    border-radius: 10px; font-size: 0.9rem; font-weight: 600;
    text-decoration: none; margin: 16px 0 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.receipt-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    text-decoration: none;
}

.receipt-system { text-align: center; font-size: 0.72rem; color: var(--text-3); }


/* ---- Comparison table ---- */
.note-table-wrapper {
    overflow-x: auto; border-radius: 8px;
    border: 1px solid var(--table-border); margin-bottom: 16px;
}

.note-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }

.note-table th {
    padding: 8px 12px; text-align: left; font-weight: 600; font-size: 0.72rem;
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--table-border); white-space: nowrap;
}

.note-table td {
    padding: 7px 12px; border-bottom: 1px solid var(--table-border); white-space: nowrap;
}

.note-table tr:last-child td { border-bottom: none; }
.col-charm { background: var(--charm-col-bg); font-weight: 500; }
.t-yes { color: var(--check-color); font-weight: 600; }
.t-no  { color: #FF3B30; font-weight: 600; }
.t-meh { color: var(--text-3); }


/* ---- FAQ ---- */
/* FAQ as cards */
.faq-item {
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}

.faq-q {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 14px 18px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.88rem; font-weight: 600;
    color: var(--text-1); text-align: left;
    transition: background 0.12s ease;
}

.faq-q:hover { background: var(--faq-hover); }

.faq-toggle {
    font-size: 0.55rem; color: var(--text-3);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block; flex-shrink: 0;
    width: 16px; text-align: center;
}

.faq-item.open .faq-toggle { transform: rotate(90deg); }

.faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-a { max-height: 600px; }

.faq-a p {
    padding: 0 18px 12px 44px;
    font-size: 0.85rem; line-height: 1.7; color: var(--text-2);
}

.faq-a ul,
.faq-a ol {
    padding: 0 18px 12px 44px;
    list-style: none;
}

.faq-a .note-checklist {
    padding: 0 18px 12px 44px;
}

.faq-a .note-checklist li {
    margin-bottom: 4px;
}

/* Pricing as natural note */
.pricing-note-amount {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 12px 0 4px;
    background: linear-gradient(120deg, var(--cyan), var(--blue), var(--purple));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holoShimmer 3s ease-in-out infinite;
}

.pricing-note-sub {
    font-size: 0.9rem;
    color: var(--text-3);
    margin-bottom: 20px;
}

.pricing-cta {
    display: block;
    width: 100%;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    margin: 36px 0 10px;
    letter-spacing: 0.01em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(0, 210, 180, 0.7), rgba(0, 195, 165, 0.6), rgba(0, 180, 155, 0.65));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 -1px 0 rgba(0, 0, 0, 0.05) inset,
        0 4px 16px rgba(0, 180, 155, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 2px rgba(0, 80, 60, 0.3);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

/* Glass shine highlight across the top half */
.pricing-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 11px 11px 0 0;
    pointer-events: none;
}

.pricing-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 -1px 0 rgba(0, 0, 0, 0.05) inset,
        0 8px 28px rgba(0, 180, 155, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .pricing-cta {
    background: linear-gradient(160deg, rgba(0, 200, 170, 0.6), rgba(0, 180, 155, 0.5), rgba(0, 160, 140, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 4px 20px rgba(0, 180, 155, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .pricing-cta:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 8px 32px rgba(0, 180, 155, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.25);
}

.pricing-fine {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 4px;
}

/* Checklist CTA */
.cta-checklist {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(52, 199, 89, 0.06);
    border: 1.5px solid rgba(52, 199, 89, 0.2);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    margin: 28px 0 10px;
}

.cta-checklist:hover {
    background: rgba(52, 199, 89, 0.12);
    border-color: rgba(52, 199, 89, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.15);
    text-decoration: none !important;
}

.cta-checklist:hover * {
    text-decoration: none !important;
}

.cta-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2.5px solid rgba(52, 199, 89, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: transparent;
}

.cta-checklist:hover .cta-checkbox {
    border-color: #34C759;
    background: #34C759;
    transform: scale(1.08);
}

.cta-checkbox-tick {
    opacity: 0;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    transition: opacity 0.2s ease;
}

.cta-checklist:hover .cta-checkbox-tick {
    opacity: 1;
}

.cta-checklist-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    flex: 1;
}

.cta-checklist-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: #34C759;
    white-space: nowrap;
}

[data-theme="dark"] .cta-checklist {
    background: rgba(48, 209, 88, 0.06);
    border-color: rgba(48, 209, 88, 0.2);
}

[data-theme="dark"] .cta-checklist:hover {
    background: rgba(48, 209, 88, 0.14);
    border-color: rgba(48, 209, 88, 0.4);
    box-shadow: 0 6px 20px rgba(48, 209, 88, 0.12);
}

[data-theme="dark"] .cta-checkbox {
    border-color: rgba(48, 209, 88, 0.35);
}

[data-theme="dark"] .cta-checklist:hover .cta-checkbox {
    border-color: #30D158;
    background: #30D158;
}

[data-theme="dark"] .cta-checklist-price {
    color: #30D158;
}

.already-purchased {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 14px;
}

.already-purchased a {
    color: var(--text-3);
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.15);
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.already-purchased a:hover {
    color: var(--blue);
    text-decoration-color: var(--blue);
}

[data-theme="dark"] .already-purchased a {
    text-decoration-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .already-purchased a:hover {
    color: var(--blue);
    text-decoration-color: var(--blue);
}

/* Try Charm note */
.try-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.try-feature-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-1);
}

.try-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.try-launch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(0, 200, 170, 0.15), rgba(74, 158, 255, 0.1));
    border: 1px solid rgba(0, 200, 170, 0.25);
    color: var(--cyan);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.try-launch-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(160deg, rgba(0, 200, 170, 0.22), rgba(74, 158, 255, 0.15));
    box-shadow: 0 4px 16px rgba(0, 200, 170, 0.15);
    text-decoration: none;
}

.try-launch-icon {
    font-size: 1.2rem;
}

.try-launch-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.try-launch-btn:hover .try-launch-arrow {
    transform: translateX(3px);
}

[data-theme="dark"] .try-launch-btn {
    background: linear-gradient(160deg, rgba(0, 200, 170, 0.12), rgba(74, 158, 255, 0.08));
    border-color: rgba(0, 200, 170, 0.2);
}

[data-theme="dark"] .try-launch-btn:hover {
    background: linear-gradient(160deg, rgba(0, 200, 170, 0.2), rgba(74, 158, 255, 0.12));
}

/* ---- Try Charm (embedded interactive challenges) ---- */
#note-try .challenge {
    display: none;
    animation: trySlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    margin-top: 28px;
}

#note-try .challenge.active { display: block; }

#note-try .challenge.exiting {
    animation: trySlideDown 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes trySlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes trySlideDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-16px); }
}

.try-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.try-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.try-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.try-badge.badge-cyan { background: rgba(0, 212, 170, 0.1); color: #00b894; border: 1px solid rgba(0, 212, 170, 0.2); }
.try-badge.badge-blue { background: rgba(74, 158, 255, 0.1); color: #3a8ae8; border: 1px solid rgba(74, 158, 255, 0.2); }
.try-badge.badge-purple { background: rgba(168, 85, 247, 0.1); color: #9333ea; border: 1px solid rgba(168, 85, 247, 0.2); }
.try-badge.badge-gold { background: rgba(200, 160, 50, 0.1); color: #b8941e; border: 1px solid rgba(200, 160, 50, 0.2); }
.try-badge.badge-green { background: rgba(52, 199, 89, 0.1); color: #2ea44f; border: 1px solid rgba(52, 199, 89, 0.2); }
.try-badge.badge-orange { background: rgba(255, 160, 40, 0.1); color: #e8940a; border: 1px solid rgba(255, 160, 40, 0.2); }
.try-badge.badge-coral { background: rgba(232, 115, 90, 0.1); color: #d4624a; border: 1px solid rgba(232, 115, 90, 0.2); }

[data-theme="dark"] .try-badge.badge-cyan { background: rgba(0, 212, 170, 0.12); color: #00d4aa; border-color: rgba(0, 212, 170, 0.25); }
[data-theme="dark"] .try-badge.badge-blue { background: rgba(74, 158, 255, 0.12); color: #4a9eff; border-color: rgba(74, 158, 255, 0.25); }
[data-theme="dark"] .try-badge.badge-purple { background: rgba(168, 85, 247, 0.12); color: #a855f7; border-color: rgba(168, 85, 247, 0.25); }
[data-theme="dark"] .try-badge.badge-gold { background: rgba(200, 160, 50, 0.12); color: #d4a830; border-color: rgba(200, 160, 50, 0.25); }
[data-theme="dark"] .try-badge.badge-green { background: rgba(52, 199, 89, 0.12); color: #30D158; border-color: rgba(52, 199, 89, 0.25); }
[data-theme="dark"] .try-badge.badge-orange { background: rgba(255, 160, 40, 0.12); color: #f5a623; border-color: rgba(255, 160, 40, 0.25); }
[data-theme="dark"] .try-badge.badge-coral { background: rgba(232, 115, 90, 0.12); color: #e8735a; border-color: rgba(232, 115, 90, 0.25); }

.try-heading {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

/* Prompt box removed - inline prompts now */

#note-try .try-instruction {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: 28px;
}

.try-instruction code {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.82em;
    background: var(--kbd-bg);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--text-1);
}

#note-try .type-area {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--try-accent, rgba(52, 199, 89, 0.35));
    background: var(--callout-subtle-bg);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-1);
    outline: none;
    caret-color: var(--try-accent-solid, #34C759);
    box-shadow: 0 0 0 3px var(--try-accent-glow, rgba(52, 199, 89, 0.06));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 20px;
    position: relative;
}

#note-try .type-area:focus {
    border-color: var(--try-accent-focus, rgba(52, 199, 89, 0.5));
    box-shadow: 0 0 0 3px var(--try-accent-glow-focus, rgba(52, 199, 89, 0.1));
}

#try-ch1 { --try-accent: rgba(0, 212, 170, 0.35); --try-accent-solid: #00d4aa; --try-accent-glow: rgba(0, 212, 170, 0.06); --try-accent-focus: rgba(0, 212, 170, 0.5); --try-accent-glow-focus: rgba(0, 212, 170, 0.1); }
#try-ch2 { --try-accent: rgba(74, 158, 255, 0.35); --try-accent-solid: #4a9eff; --try-accent-glow: rgba(74, 158, 255, 0.06); --try-accent-focus: rgba(74, 158, 255, 0.5); --try-accent-glow-focus: rgba(74, 158, 255, 0.1); }
#try-ch3 { --try-accent: rgba(168, 85, 247, 0.35); --try-accent-solid: #a855f7; --try-accent-glow: rgba(168, 85, 247, 0.06); --try-accent-focus: rgba(168, 85, 247, 0.5); --try-accent-glow-focus: rgba(168, 85, 247, 0.1); }
#try-ch4 { --try-accent: rgba(52, 199, 89, 0.35); --try-accent-solid: #34C759; --try-accent-glow: rgba(52, 199, 89, 0.06); --try-accent-focus: rgba(52, 199, 89, 0.5); --try-accent-glow-focus: rgba(52, 199, 89, 0.1); }
#try-ch5 { --try-accent: rgba(200, 160, 50, 0.35); --try-accent-solid: #c8a830; --try-accent-glow: rgba(200, 160, 50, 0.06); --try-accent-focus: rgba(200, 160, 50, 0.5); --try-accent-glow-focus: rgba(200, 160, 50, 0.1); }
#try-ch6 { --try-accent: rgba(232, 115, 90, 0.35); --try-accent-solid: #e8735a; --try-accent-glow: rgba(232, 115, 90, 0.06); --try-accent-focus: rgba(232, 115, 90, 0.5); --try-accent-glow-focus: rgba(232, 115, 90, 0.1); }

#note-try .area-disabled {
    pointer-events: none;
    opacity: 0.7;
}

#note-try .type-area .type-area-placeholder {
    color: var(--text-3);
    pointer-events: none;
}

#note-try .type-area .charm-word {
    position: relative;
    display: inline;
}

#note-try .type-area .charm-glow {
    position: absolute;
    inset: -4px -6px;
    border-radius: 6px;
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
    z-index: -1;
    animation: glowPulse 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#note-try .type-area .charm-text {
    animation: textShimmer 0.3s ease-out;
}

#note-try .type-area .oracle-ghost {
    color: var(--purple);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#note-try .type-area .oracle-ghost.visible { opacity: 0.5; }
#note-try .type-area .oracle-ghost.solidified { opacity: 1; color: var(--text-1); }

#note-try .challenge-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--check-color);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 16px;
    padding: 10px 14px;
    background: rgba(52, 199, 89, 0.06);
    border: 1px solid rgba(52, 199, 89, 0.15);
    border-radius: 8px;
}

#note-try #try-check2.challenge-check { color: #3a8ae8; background: rgba(74, 158, 255, 0.06); border-color: rgba(74, 158, 255, 0.15); }
#note-try #try-check2 svg { stroke: #3a8ae8; }
#note-try #try-check3.challenge-check { color: #9333ea; background: rgba(168, 85, 247, 0.06); border-color: rgba(168, 85, 247, 0.15); }
#note-try #try-check3 svg { stroke: #9333ea; }

#note-try .challenge-check.visible { opacity: 1; transform: translateY(0); }

#note-try .challenge-check svg {
    width: 16px; height: 16px;
    stroke: var(--check-color); stroke-width: 2.5; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}

#note-try .challenge-check .check-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

#note-try .challenge-check .check-enter {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 4px;
}

#note-try .challenge-check .check-enter kbd {
    font-size: 0.7rem;
    padding: 1px 6px;
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    border-radius: 3px;
    font-family: 'SF Mono', Menlo, monospace;
}

#note-try .challenge-callout {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-2);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#note-try .challenge-callout.visible { opacity: 1; transform: translateY(0); }

#note-try .challenge-callout.callout-cyan { background: rgba(0, 212, 170, 0.06); border: 1px solid rgba(0, 212, 170, 0.15); }
#note-try .challenge-callout.callout-blue { background: rgba(74, 158, 255, 0.06); border: 1px solid rgba(74, 158, 255, 0.15); }
#note-try .challenge-callout.callout-purple { background: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.15); }
#note-try .challenge-callout.callout-green { background: rgba(52, 199, 89, 0.06); border: 1px solid rgba(52, 199, 89, 0.15); }
#note-try .challenge-callout.callout-gold { background: rgba(200, 160, 50, 0.06); border: 1px solid rgba(200, 160, 50, 0.15); }
#note-try .challenge-callout.callout-orange { background: rgba(255, 160, 40, 0.06); border: 1px solid rgba(255, 160, 40, 0.15); }
#note-try .challenge-callout.callout-orange .challenge-callout-label { color: #f5a623; }
#note-try .challenge-callout.callout-coral { background: rgba(232, 115, 90, 0.06); border: 1px solid rgba(232, 115, 90, 0.15); }

#note-try #try-check6.challenge-check { color: #d4624a; background: rgba(232, 115, 90, 0.06); border-color: rgba(232, 115, 90, 0.15); }
#note-try #try-check6 svg { stroke: #d4624a; }

#note-try .challenge.active { position: relative; }

/* Keyboard shortcut combo */
.kbd-combo { display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline; }
.kbd-combo kbd { display: inline-block; padding: 2px 7px; font-size: 0.82em; font-family: 'SF Mono', Menlo, monospace; font-weight: 500; background: var(--kbd-bg); border: 1px solid var(--kbd-border); border-radius: 4px; line-height: 1.4; white-space: nowrap; }
.kbd-combo .kbd-plus { font-size: 0.7em; color: var(--text-3); font-weight: 400; user-select: none; }

/* Emoji revert pill */
.try-emoji-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(232, 115, 90, 0.06); border: 1px solid rgba(232, 115, 90, 0.2); margin-bottom: 12px; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.try-emoji-pill.visible { opacity: 1; transform: translateY(0); }
.try-emoji-pill .try-dict-text { font-size: 0.85rem; color: var(--text-1); }
.try-emoji-pill .try-dict-text em { font-weight: 600; font-style: normal; }
.try-emoji-pill .try-dict-actions { display: flex; gap: 6px; }
.try-emoji-pill .try-dict-btn.try-dict-yes { color: #d4624a; }
.try-emoji-pill .try-dict-btn.try-dict-yes:hover { background: rgba(232, 115, 90, 0.1); }
[data-theme="dark"] .try-emoji-pill { background: rgba(232, 115, 90, 0.05); border-color: rgba(232, 115, 90, 0.18); }

/* Chapter navigation strip */
.try-chapter-nav { display: flex; align-items: stretch; gap: 4px; margin-top: -10px; margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.try-chapter-nav::-webkit-scrollbar { display: none; }
.try-chapter-nav.hidden { display: none; }
.chapter-chip { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border-radius: 10px; border: 1px solid var(--divider); background: none; font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 0.65rem; font-weight: 500; color: var(--text-3); cursor: pointer; white-space: nowrap; min-width: 0; transition: all 0.2s ease; }
.chapter-chip:hover { color: var(--text-2); }
.chapter-chip[data-color="cyan"]:hover { border-color: var(--cyan); background: rgba(0, 212, 170, 0.04); }
.chapter-chip[data-color="blue"]:hover { border-color: var(--blue); background: rgba(74, 158, 255, 0.04); }
.chapter-chip[data-color="purple"]:hover { border-color: var(--purple); background: rgba(168, 85, 247, 0.04); }
.chapter-chip[data-color="green"]:hover { border-color: var(--check-color); background: rgba(52, 199, 89, 0.04); }
.chapter-chip[data-color="gold"]:hover { border-color: #c8a830; background: rgba(200, 160, 50, 0.04); }
.chapter-chip[data-color="coral"]:hover { border-color: #e8735a; background: rgba(232, 115, 90, 0.04); }
.chapter-chip.active { color: var(--text-1); font-weight: 600; }
.chapter-chip.active[data-color="cyan"] { border-color: var(--cyan); background: rgba(0, 212, 170, 0.06); }
.chapter-chip.active[data-color="blue"] { border-color: var(--blue); background: rgba(74, 158, 255, 0.06); }
.chapter-chip.active[data-color="purple"] { border-color: var(--purple); background: rgba(168, 85, 247, 0.06); }
.chapter-chip.active[data-color="green"] { border-color: var(--check-color); background: rgba(52, 199, 89, 0.06); }
.chapter-chip.active[data-color="gold"] { border-color: #c8a830; background: rgba(200, 160, 50, 0.06); }
.chapter-chip.active[data-color="coral"] { border-color: #e8735a; background: rgba(232, 115, 90, 0.06); }
.chapter-chip.completed { color: var(--text-2); }

/* Receipt link */
.try-receipt-link { cursor: pointer; transition: opacity 0.15s ease; }
.try-receipt-link:hover { opacity: 0.7; }
.try-receipt-item:nth-child(6) { animation-delay: 1.2s; }
.try-receipt-item:nth-child(1).checked .try-receipt-check { background: var(--cyan); }
.try-receipt-item:nth-child(2).checked .try-receipt-check { background: var(--blue); }
.try-receipt-item:nth-child(3).checked .try-receipt-check { background: var(--purple); }
.try-receipt-item:nth-child(4).checked .try-receipt-check { background: var(--check-color); }
.try-receipt-item:nth-child(5).checked .try-receipt-check { background: #c8a830; }
.try-receipt-item:nth-child(6).checked .try-receipt-check { background: #e8735a; }

/* Mode selection */
.try-modes-tip { max-width: 360px; margin: 12px auto 32px; border: 1px solid var(--divider); border-radius: 12px; background: rgba(0, 0, 0, 0.018); text-align: left; overflow: hidden; }
[data-theme="dark"] .try-modes-tip { background: rgba(255, 255, 255, 0.018); }
.try-modes-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 10px 16px 0; }
.try-modes-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 16px; }
.try-modes-content { flex: 1; min-width: 0; }
.try-modes-name { font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.try-modes-desc { font-size: 0.75rem; line-height: 1.4; color: var(--text-3); }
.try-modes-active-tag { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--check-color); background: rgba(52, 199, 89, 0.08); padding: 1px 6px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
.try-modes-footnote { font-size: 0.72rem; line-height: 1.5; color: var(--text-3); padding: 8px 16px 10px; border-top: 1px solid var(--divider); }

/* Shortcut toast */
.try-shortcut-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); padding: 12px 22px; border-radius: 12px; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100; white-space: nowrap; }
.try-shortcut-toast.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.try-shortcut-toast .try-toast-real { display: flex; align-items: center; gap: 3px; }
.try-shortcut-toast .try-toast-real kbd { display: inline-block; padding: 4px 10px; font-size: 0.88em; font-family: 'SF Mono', Menlo, monospace; font-weight: 500; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; color: #333; }
.try-shortcut-toast .try-toast-real .kbd-plus { font-size: 0.75em; color: #bbb; }
[data-theme="dark"] .try-shortcut-toast { background: rgba(30, 32, 42, 0.98); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .try-shortcut-toast .try-toast-real kbd { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: #ddd; }
[data-theme="dark"] .try-shortcut-toast .try-toast-real .kbd-plus { color: #555; }

/* Fix Selection button */
.fix-selection-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 160, 40, 0.3);
    background: rgba(255, 160, 40, 0.06);
    color: var(--text-1);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    margin-bottom: 16px;
}

.fix-selection-btn:hover {
    background: rgba(255, 160, 40, 0.12);
    border-color: rgba(255, 160, 40, 0.5);
}

.fix-selection-btn:active { transform: scale(0.96); }

.fix-selection-btn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

.shortcut-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.78em;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Fix pill (celebration) */
.fix-pill {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.25);
    color: #34C759;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 10px;
    animation: fixPillIn 0.3s ease forwards;
}

.fix-pill.visible { display: inline-flex; }

@keyframes fixPillIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.fix-pill-check { font-size: 0.7rem; font-weight: 700; }

/* Shortcut flash animation */
#try-ch6 { position: relative; }

.shortcut-flash {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 10;
    pointer-events: none;
}

.shortcut-flash.visible {
    display: flex;
    animation: shortcutPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.shortcut-flash.fading {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.shortcut-badge-lg {
    box-shadow: 0 4px 24px rgba(255, 160, 40, 0.2), 0 0 40px rgba(255, 160, 40, 0.1);
}

@keyframes shortcutPop {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.15); }
    70% { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.shortcut-badge-lg {
    padding: 8px 18px;
    font-size: 1.2rem;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Check colour for challenge 6 */
#try-check6 .check-left svg { stroke: #f5a623; }
#try-check6 .check-left { color: #f5a623; }

/* Receipt item 6 */
.try-receipt-item:nth-child(6) { animation-delay: 1.2s; }

#note-try .challenge-callout-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    opacity: 0.6;
}

#note-try .challenge-next {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: none;
    border: 1px solid var(--divider);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s ease;
}

#note-try .challenge-next.visible { opacity: 1; transform: translateY(0); }
#note-try .challenge-next:hover { background: var(--faq-hover); }
#note-try .challenge-next svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* Dictionary pill */
.try-dict-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(200, 160, 50, 0.08);
    border: 1px solid rgba(200, 160, 50, 0.2);
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.try-dict-pill.visible { opacity: 1; transform: translateY(0); }

.try-dict-text { font-size: 0.85rem; color: var(--text-1); }
.try-dict-text em { font-weight: 600; font-style: normal; }

.try-dict-actions { display: flex; gap: 6px; }

.try-dict-btn {
    width: 32px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--divider);
    background: none;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}

.try-dict-yes { color: var(--check-color); }
.try-dict-yes:hover { background: rgba(52, 199, 89, 0.1); }
.try-dict-no { color: var(--text-3); }
.try-dict-no:hover { background: var(--faq-hover); }

/* Setup steps */
.try-setup-steps { display: flex; flex-direction: column; gap: 10px; }

.try-setup-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.5;
}

.try-setup-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--step-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    color: var(--text-2); flex-shrink: 0;
    margin-top: 1px;
}

/* Ready state */
.try-ready {
    text-align: center;
    padding: 20px 0;
}

/* Receipt summary */
.try-complete { text-align: center; padding-top: 20px; }

.try-receipt {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 360px;
    margin: 0 auto 40px;
    border: 1px solid var(--divider);
    border-radius: 12px;
    overflow: hidden;
}

.try-receipt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    color: var(--text-3);
    opacity: 0;
    transform: translateY(6px);
    animation: receiptFadeIn 0.35s ease forwards;
}

.try-receipt-item:last-child { border-bottom: none; }

.try-receipt-item:nth-child(1) { animation-delay: 0.2s; }
.try-receipt-item:nth-child(2) { animation-delay: 0.4s; }
.try-receipt-item:nth-child(3) { animation-delay: 0.6s; }
.try-receipt-item:nth-child(4) { animation-delay: 0.8s; }
.try-receipt-item:nth-child(5) { animation-delay: 1.0s; }
.try-receipt-item:nth-child(6) { animation-delay: 1.2s; }

@keyframes receiptFadeIn {
    to { opacity: 1; transform: translateY(0); color: var(--text-1); }
}

.try-receipt-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--divider);
    color: transparent;
    font-size: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.try-receipt-item.checked .try-receipt-check {
    background: currentColor;
    transform: scale(1.1);
}

.try-receipt-item.checked .try-receipt-check::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) translate(-0.5px, -0.5px);
}

.try-receipt-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-1);
}

.try-receipt-desc {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-left: auto;
}

.try-ready {
    text-align: center;
    padding-top: 8px;
}

.try-ready-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    margin-bottom: 12px;
}

.try-ready-text {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.try-start-over {
    font-size: 0.78rem;
    color: var(--text-3);
    cursor: pointer;
    transition: color 0.15s ease;
}

.try-start-over:hover { color: var(--text-2); }

/* Progress bar (sticky at bottom of try note) */
.try-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 0;
    margin-top: 40px;
    border-top: 1px solid var(--divider);
    font-size: 0.72rem;
    color: var(--text-3);
}

.try-progress-label { white-space: nowrap; font-weight: 600; }

.try-progress-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--divider);
    overflow: hidden;
}

.try-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--cyan);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.try-progress-hint {
    white-space: nowrap;
    font-style: italic;
}

/* Celebration glow overlay (positioned inside .notes-app) */
.celebration-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 9999;
    border: 3px solid rgba(0, 212, 170, 0);
    transition: border-color 0.4s ease;
}

.celebration-glow.pulse-1 { border-color: rgba(0, 212, 170, 0.4); box-shadow: inset 0 0 30px rgba(0, 212, 170, 0.06); }
.celebration-glow.pulse-2 { border-color: rgba(0, 212, 170, 0); box-shadow: none; }

/* Goodies icon grid */
.goody-card {
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    margin-bottom: 12px;
}

.goody-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.goody-emoji {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    border-radius: 10px;
    flex-shrink: 0;
}

.goody-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-1);
}

.goody-card p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-2);
    margin-bottom: 0;
}

/* Inline quote highlight */
.pull-quote {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-1);
    padding: 16px 0;
    margin: 8px 0;
    line-height: 1.5;
    opacity: 0.85;
}


/* ---- Boring stuff footer ---- */
.boring-footer { text-align: center; }
.boring-footer p { font-size: 0.82rem; color: var(--text-3); }
.boring-copyright { font-size: 0.7rem !important; letter-spacing: 0.1em; margin-top: 8px; }


/* ---- Sidebar section labels ---- */
.sidebar-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    padding: 12px 10px 4px;
    opacity: 0.6;
}

.sidebar-label:first-child {
    padding-top: 4px;
}

/* ---- Sidebar divider & fake notes ---- */
.sidebar-divider {
    height: 1px;
    background: var(--divider);
    margin: 8px 10px;
}

.note-item.fake-note {
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
    cursor: default;
    border-left-color: transparent !important;
}

.note-item.fake-note:hover {
    background: transparent;
}

.note-item.fake-note .note-item-title {
    color: var(--text-3);
}

.note-item.fake-note .note-item-sub {
    color: var(--text-3);
    opacity: 0.6;
}

/* ---- Contact links ---- */
.contact-links p {
    margin-bottom: 6px;
}

/* Solace product card */
.solace-product-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(100, 140, 200, 0.04), rgba(140, 120, 180, 0.04));
    border: 1px solid rgba(100, 140, 200, 0.12);
    text-decoration: none;
    color: var(--text-1);
    margin: 16px 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.solace-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(100, 140, 200, 0.12);
    border-color: rgba(100, 140, 200, 0.25);
    text-decoration: none;
}

.solace-product-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    outline: 1px solid rgba(0, 0, 0, 0.06);
    outline-offset: -1px;
    flex-shrink: 0;
}

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

.solace-product-name {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.solace-product-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-3);
}

.solace-product-arrow {
    color: var(--text-3);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.solace-product-card:hover .solace-product-arrow {
    transform: translateX(2px);
}

[data-theme="dark"] .solace-product-card {
    background: linear-gradient(135deg, rgba(100, 140, 200, 0.06), rgba(140, 120, 180, 0.06));
    border-color: rgba(100, 140, 200, 0.15);
}

[data-theme="dark"] .solace-product-card:hover {
    box-shadow: 0 6px 20px rgba(100, 140, 200, 0.08);
    border-color: rgba(100, 140, 200, 0.3);
}

/* Blog callout in Say Hello note */
/* Linked callout cards (blog, feedback, etc.) */
.linked-callout {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--callout-subtle-bg);
    border: 1px solid var(--callout-subtle-border);
    margin-bottom: 8px;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.linked-callout:hover {
    border-color: var(--blue);
    background: rgba(74, 158, 255, 0.04);
    text-decoration: none;
}

.linked-callout-icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.linked-callout-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.linked-callout-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
}

.linked-callout-desc {
    font-size: 0.72rem;
    color: var(--text-3);
    line-height: 1.3;
    margin-top: 1px;
}

.linked-callout-arrow {
    font-size: 0.7rem;
    color: var(--text-3);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.linked-callout:hover .linked-callout-arrow {
    transform: translateX(2px);
}

.blog-callout-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.blog-callout-link:hover {
    opacity: 0.8;
    text-decoration: none;
}


/* ---- Hero layout (editor + outline panel) ---- */
.hero-layout {
    display: flex;
    height: 100%;
}

.hero-main {
    flex: 1;
    overflow-y: auto;
}

/* ---- Hero metadata strip ---- */
.hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 14px;
    margin-bottom: 28px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.hero-meta-dot { opacity: 0.4; }

.hero-meta-charm {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--text-2);
}

.hero-meta-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    transition: filter 0.3s ease;
}

.hero-meta-icon.pulse {
    filter: brightness(1.4) drop-shadow(0 0 4px rgba(168, 85, 247, 0.5));
}


/* Charm status indicator */
.charm-status {
    position: absolute;
    top: 32px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--callout-subtle-bg);
    transition: background 0.5s ease;
    z-index: 2;
}

.charm-status.active {
    background: rgba(52, 199, 89, 0.06);
}

.charm-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.charm-status-dot.inactive {
    background: rgba(180, 80, 80, 0.4);
}

.charm-status-dot.active-dot {
    background: rgba(52, 199, 89, 0.7);
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.3);
}

.charm-status-text {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-3);
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color 0.5s ease;
}

.charm-status.active .charm-status-text {
    color: rgba(52, 199, 89, 0.7);
}


/* ---- Hero (Meet Charm note) ---- */
.ghost-line {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 1.25rem;
    line-height: 2.1;
    color: var(--text-ghost);
    min-height: 2.1em;
}

.editor-focus {
    min-height: auto;
    line-height: 1.9;
}

/* Hero note: no max-width, fit everything in viewport */
#note-meet-charm .note-scroll {
    overflow-y: auto;
}

#note-meet-charm .note-body {
    max-width: 860px;
    padding: 24px 32px 32px 48px;
}

/* Simple vertical stack: label, video, pills below */
#note-meet-charm .hero-video {
    display: flex;
    flex-direction: column;
}

#note-meet-charm .hero-video .video-wrapper {
    width: 100%;
}

/* Chapters always below video as a single row */
#note-meet-charm .hero-video .video-chapters {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 8px;
}

#note-meet-charm .chapter {
    justify-content: center;
    padding: 6px 1px;
    font-size: clamp(0.38rem, 1.1vw, 0.68rem);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Demo video */
.hero-video {
    margin-top: 24px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.video-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 10px;
}

.hero-video.visible {
    opacity: 1;
    transform: translateY(0);
}

.video-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--callout-subtle-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .video-wrapper {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-video video {
    width: 100%;
    display: block;
}

/* Custom video controls */
.video-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--callout-subtle-bg);
    border-top: 1px solid var(--callout-subtle-border);
}

.vc-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.12s ease;
    flex-shrink: 0;
}

.vc-btn:hover { background: var(--tb-hover); }
.vc-btn svg { width: 14px; height: 14px; }

/* Play/pause icon toggle */
.video-wrapper.playing .vc-icon-play { display: none; }
.video-wrapper:not(.playing) .vc-icon-pause { display: none; }

/* Mute icon toggle */
.video-wrapper.muted .vc-icon-unmuted { display: none; }
.video-wrapper:not(.muted) .vc-icon-muted { display: none; }

.vc-progress {
    flex: 1;
    height: 4px;
    background: var(--divider);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.vc-progress-bar {
    height: 100%;
    background: var(--text-3);
    border-radius: 2px;
    width: 0%;
    transition: width 0.15s linear;
}

.vc-time {
    font-size: 0.65rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* Chapters */
.video-chapters {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.chapter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    border: 1px solid var(--callout-subtle-border);
    background: var(--callout-subtle-bg);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.chapter:hover {
    background: var(--faq-hover);
    border-color: var(--text-3);
}

.chapter.active {
    border-color: var(--cyan);
    background: var(--cyan-glow-soft);
    color: var(--text-1);
}

.typed-line { min-height: 2.1em; margin-bottom: 0.2em; }
.typed-line.settled { opacity: 0.85; }

.cursor {
    display: inline-block; width: 1.5px; height: 0.9em;
    background: var(--text-1); opacity: 0.65;
    vertical-align: text-bottom; margin-left: 1px; border-radius: 1px;
}

.cursor.blink { animation: cursorBlink 1.06s step-end infinite; }

.word { display: inline; position: relative; transition: color 0.3s ease; }
.word.correcting { z-index: 2; }

.word .glow-bg {
    position: absolute; inset: -6px -8px; border-radius: 10px;
    opacity: 0; pointer-events: none; filter: blur(0px); z-index: -1;
}

.word.correcting .correction-text { animation: textShimmer 0.35s ease-out; }

.glow-bg.glow-cyan   { background: var(--cyan-glow); }
.glow-bg.glow-blue   { background: var(--blue-glow); }
.glow-bg.glow-purple  { background: var(--purple-glow); }
.glow-bg.glow-emoji  { background: rgba(255, 200, 60, 0.5); }
.glow-bg.active { animation: glowPulse 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.oracle-char {
    opacity: 0; display: inline; color: var(--purple);
    filter: blur(8px); transform: scale(0.92);
    text-shadow: 0 0 14px var(--purple-glow);
    transition: opacity 0.3s ease-out, filter 0.4s ease-out, transform 0.4s ease-out, color 0.6s ease, text-shadow 0.6s ease;
}

.oracle-char.revealed { opacity: 1; filter: blur(0); transform: scale(1); }
.oracle-char.settled  { color: var(--text-1); text-shadow: none; opacity: 0.85; }

.word.oracle-pending .correction-text { color: var(--purple); transition: color 0.15s ease; }

.word.oracle-pending .glow-bg {
    background: var(--purple-glow) !important;
    opacity: 0.5 !important; filter: blur(10px) !important;
    animation: oraclePendingPulse 0.8s ease-in-out infinite !important;
}

.emoji-pop { display: inline-block; animation: emojiPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.emoji-reveal { display: inline-block; animation: emojiReveal 0.25s ease-out forwards; }

.word .afterglow {
    position: absolute; inset: -2px -4px; border-radius: 4px;
    opacity: 0; pointer-events: none; z-index: -1;
    transition: opacity 1s ease-out;
}

.word .afterglow.active { opacity: 0.08; }
.afterglow.cyan   { background: var(--cyan); }
.afterglow.blue   { background: var(--blue); }
.afterglow.purple { background: var(--purple); }

.word.holographic .correction-text {
    background: linear-gradient(120deg, var(--cyan) 0%, var(--blue) 30%, var(--purple) 60%, var(--cyan) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holoShimmer 2.5s ease-in-out infinite;
}

.ring-burst {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; border-style: solid;
    pointer-events: none; z-index: 1;
    animation: ringExpand 0.6s ease-out forwards;
}

.sparkle-float { position: absolute; pointer-events: none; z-index: 10; line-height: 1; }

.feature-label {
    position: absolute; top: -1.4em; left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.5rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 4px;
    opacity: 0; pointer-events: none; white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.feature-label.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.feature-label.cyan   { color: var(--cyan); background: var(--cyan-glow-soft); }
.feature-label.blue   { color: var(--blue); background: var(--blue-glow-soft); }
.feature-label.purple { color: var(--purple); background: var(--purple-glow-soft); }


/* ================================================
   RESPONSIVE
   ================================================ */
/* Hide lowest-priority toolbar items first */
@media (max-width: 1200px) {
    .tb-p3 { display: none; }
}


@media (max-width: 900px) {
    .tb-p2 { display: none; }
}

@media (max-width: 768px) {
    /* Card stack: gradient shows through, card floats */
    .notes-app {
        width: 100%; height: 100%;
        margin: 0; border-radius: 0; border: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    .traffic-lights { display: none; }
    .back-btn { display: none; }
    .mobile-menu-btn { display: flex; }

    /* Hide the separate titlebar and desktop toolbar */
    .titlebar { display: none; }
    .toolbar { display: none !important; }

    /* Disable frost overlays on mobile - they block interaction */
    .hero-frost { display: none !important; }

    /* Show the mobile card header inside the card */
    .mobile-card-header { display: flex !important; }

    /* Mobile bottom nav - back (1/4) + next (3/4) */
    .mobile-nav {
        display: flex;
        background: transparent;
        border-top: none;
        bottom: 12px;
        left: 16px;
        right: 16px;
        gap: 8px;
    }

    /* Back button - 1 part */
    .mobile-nav-back {
        flex: 1;
        height: 44px;
        border-radius: 14px;
        gap: 4px;
        font-size: 0.75rem;
        font-weight: 500;
        padding: 0;
    }

    .mobile-nav-back svg { width: 12px; height: 12px; }

    /* Next button - 3 parts */
    .mobile-nav-btn {
        flex: 3;
        height: 44px;
        justify-content: center;
        padding: 0 20px;
        border-radius: 14px;
    }

    /* Hide dots on mobile */
    .mobile-nav-dots { display: none; }

    /* Card stack layout */
    .app-body {
        position: relative;
        overflow: hidden;
    }

    /* Editor is a floating card */
    .editor {
        position: absolute;
        top: 16px; left: 16px; right: 16px; bottom: 66px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
        overflow: hidden;
    }

    [data-theme="dark"] .editor {
        background: rgba(22, 24, 34, 0.95);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    }

    /* Sidebar overlays within the card bounds (same position as editor) */
    .sidebar {
        position: fixed;
        top: 16px; bottom: 66px; left: 16px;
        width: calc(55% - 16px);
        z-index: 100;
        transform: translateX(calc(-100% - 16px));
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        padding-top: 10px;
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .sidebar {
        background: rgba(18, 20, 28, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-color: rgba(255, 255, 255, 0.06);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }

    .sidebar.drawer-open { transform: translateX(0); }

    /* Dim backdrop within the card area */
    .drawer-backdrop {
        display: none;
        position: fixed;
        top: 16px; bottom: 66px; left: 16px; right: 16px;
        background: rgba(0, 0, 0, 0.2);
        z-index: 99;
        border-radius: 16px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .drawer-backdrop.visible {
        display: block;
        opacity: 1;
    }

    /* Peeking cards behind */
    .app-body::before,
    .app-body::after {
        content: '';
        position: absolute;
        left: 16px; right: 16px;
        top: 16px; bottom: 66px;
        border-radius: 16px;
        pointer-events: none;
    }

    .app-body::before {
        background: rgba(255, 255, 255, 0.4);
        transform: translateY(10px) scale(0.96);
        z-index: -2;
    }

    .app-body::after {
        background: rgba(255, 255, 255, 0.6);
        transform: translateY(5px) scale(0.98);
        z-index: -1;
    }

    [data-theme="dark"] .app-body::before {
        background: rgba(255, 255, 255, 0.05);
    }

    [data-theme="dark"] .app-body::after {
        background: rgba(255, 255, 255, 0.08);
    }

    .note-body { padding: 20px 18px 60px; }
    .note-title { font-size: 1.4rem; }
    .receipt { padding: 20px 16px; }
    .note-table { font-size: 0.65rem; }
    .note-table th, .note-table td { padding: 5px 6px; white-space: normal; }
    .charm-status { right: 16px; }
    .quote-grid { grid-template-columns: 1fr; }
    .statusbar { display: none; }

    /* Fix 1: Center Charm logo in mobile header */
    .mobile-card-header {
        justify-content: center;
        position: relative;
    }

    .mobile-card-header .mobile-card-menu {
        position: absolute;
        left: 12px;
    }

    .mobile-card-header .titlebar-cta {
        position: absolute;
        right: 12px;
    }

    /* Fix 3: Back button wider, next button smaller */
    .mobile-nav-back {
        flex: 2;
        min-width: 0;
        padding: 0 10px;
        font-size: 0.7rem;
    }

    .mobile-nav-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .mobile-nav-btn {
        flex: 3;
        font-size: 0.78rem;
        padding: 0 14px;
    }

    .mobile-nav-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Fix 4: Feature cards better alignment on mobile */
    .note-card { padding: 16px 14px; }
    .note-card-header { gap: 10px; }
    .note-card-icon { width: 32px; height: 32px; border-radius: 8px; }
    .note-card-title { font-size: 0.88rem; }
    .note-card p { font-size: 0.82rem; }

    /* Fix 5: Stats row - stack on mobile instead of 3 columns */
    .note-stats-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .note-stat {
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 14px;
    }

    .note-stat-value { font-size: 1.1rem; }
    .note-stat-label { margin-top: 0; }

    /* Fix 6: Comparison table scroll hint */
    .note-table-wrapper {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .note-table { min-width: 400px; }

    /* Fix 7: Checklist items wrap properly */
    .note-checklist li {
        font-size: 0.78rem;
        gap: 6px;
    }

    .note-kv {
        font-size: 0.8rem;
    }

    .note-kv-label, .note-kv-value {
        font-size: 0.78rem;
    }

    /* Feature demo boxes */
    .note-demo { font-size: 0.82rem; padding: 10px 12px; }

    /* CTA checklist */
    .cta-checklist { padding: 12px 14px; gap: 10px; }
    .cta-checklist-text { font-size: 0.82rem; }
    .cta-checklist-price { font-size: 0.78rem; }
}

@media (max-width: 480px) {
    .note-body { padding: 16px 12px 56px; }
    .note-title { font-size: 1.2rem; }
    .feature-icon-img { width: 28px; height: 28px; }

    .editor { left: 10px; right: 10px; top: 10px; bottom: 58px; }
    .app-body::before,
    .app-body::after { left: 10px; right: 10px; top: 10px; bottom: 58px; }
    .mobile-nav { left: 10px; right: 10px; bottom: 8px; }

    /* Even smaller nav buttons */
    .mobile-nav-back { font-size: 0.65rem; padding: 0 8px; }
    .mobile-nav-btn { font-size: 0.72rem; padding: 0 12px; }

    /* Table even tighter */
    .note-table { font-size: 0.6rem; min-width: 340px; }
    .note-table th, .note-table td { padding: 4px 5px; }

    /* Checklist tighter */
    .note-checklist li { font-size: 0.75rem; }
    .note-check { width: 14px; height: 14px; }

    /* KV pairs */
    .note-kv { font-size: 0.75rem; }

    /* Section headers */
    .note-section { font-size: 0.62rem; }

    /* Steps */
    .step-num { width: 26px; height: 26px; font-size: 0.6rem; }
    .step-content p { font-size: 0.78rem; }
}