.vn-body {
    --vn-bg: #f6f5fa;
    --vn-surface: #fff;
    --vn-line: #e4e1ed;
    --vn-ink: #231d35;
    --vn-muted: #625b73;
    --vn-primary: #5b3bc3;
    --vn-side: #211937;
    --vn-side-muted: #c4bbdb;
    margin: 0;
    color: var(--vn-ink);
    background: var(--vn-bg);
    font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.vn-body *, .vn-body *::before, .vn-body *::after { box-sizing: border-box; }
.vn-body [hidden] { display: none !important; }
.vn-body a { color: var(--vn-primary); text-underline-offset: 3px; }
.vn-body button, .vn-body select, .vn-body input, .vn-body textarea { font: inherit; }
.vn-body button { cursor: pointer; }
.vn-body :focus-visible { outline: 3px solid #a17cff; outline-offset: 3px; }
.vn-body h1, .vn-body h2, .vn-body h3 { line-height: 1.2; margin: 0; letter-spacing: -.027em; }
.vn-body p { margin: 0; }
.vn-body svg.vn-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: middle; }
.vn-visually-hidden, .vn-skip:not(:focus) {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.vn-skip:focus { position: fixed; top: 1rem; left: 1rem; z-index: 10; background: white; padding: .75rem 1rem; border-radius: .6rem; }
.vn-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.vn-sidebar {
    background: var(--vn-side); color: #fff; padding: 22px 16px;
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; scrollbar-width: thin;
}
.vn-brand { display: flex; gap: .8rem; align-items: center; padding: 4px 8px 18px; font-weight: 800; font-size: 1.16rem; }
.vn-sidebar .vn-brand { color: #fff; text-decoration: none; }
.vn-brand strong { font-weight: 650; color: #d8caff; }
.vn-brand small { display: block; font-size: .7rem; color: var(--vn-side-muted); font-weight: 550; }
.vn-mark, .vn-gate-mark { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 13px; background: #7955e2; color: #fff; font: 800 25px/1 ui-sans-serif, system-ui; position: relative; }
.vn-mark span, .vn-gate-mark span { color: #a6f0d9; position: absolute; inset-inline-end: 6px; inset-block-end: 6px; }
.vn-sidebar nav > a {
    display: flex; min-height: 39px; align-items: center; gap: 11px; padding: 7px 9px;
    text-decoration: none; border-radius: 9px; color: #ede8fa; font-size: .86rem; margin-bottom: 2px;
}
.vn-sidebar nav > a:hover, .vn-sidebar nav > a[aria-current="page"] { color: white; background: #3f2e64; }
.vn-sidebar nav > a[aria-current="page"] { font-weight: 720; }
.vn-sidebar nav > a span { overflow-wrap: anywhere; }
.vn-sidebar nav > a small { margin-left: auto; color: var(--vn-side-muted); }
.vn-sidebar .vn-icon { width: 1.1rem; height: 1.1rem; }
.vn-nav-title, .vn-nav-label { color: var(--vn-side-muted); font-size: .64rem; font-weight: 800; letter-spacing: .14em; }
.vn-sidebar .vn-nav-title { padding: 18px 9px 5px; }
.vn-nav-label { padding: 15px 6px 4px 9px; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.vn-nav-label a { color: inherit; text-decoration: none; padding-block: 5px; }
.vn-nav-label a:hover { color: #fff; }
.vn-nav-label a:last-child { padding-inline: 6px; }
.vn-sidebar-end { margin-top: auto; padding: 19px 9px 0; display: grid; gap: 10px; font-size: .78rem; }
.vn-sidebar-end a, .vn-sidebar-end button { color: var(--vn-side-muted); }
.vn-sidebar-end button { background: none; border: 0; padding: 0; text-decoration: underline; }
.vn-body-main { min-width: 0; }
.vn-topbar {
    min-height: 70px; display: flex; align-items: center; gap: 16px; padding: 12px clamp(15px, 3vw, 42px);
    border-bottom: 1px solid var(--vn-line); background: var(--vn-surface);
}
.vn-crumb { margin-right: auto; color: var(--vn-muted); font-size: .83rem; overflow-wrap: anywhere; }
.vn-crumb strong { color: var(--vn-ink); }
.vn-crumb > span { margin-inline: .25rem; color: #958ba6; }
.vn-search { position: relative; display: flex; align-items: center; min-width: 0; width: min(240px, 27%); }
.vn-search .vn-icon { position: absolute; left: 11px; color: var(--vn-muted); pointer-events: none; }
.vn-body input:not([type=checkbox]):not([type=hidden]), .vn-body select, .vn-body textarea {
    min-width: 0; width: 100%; padding: 9px 11px; border: 1px solid #d7d2e3; border-radius: 9px;
    background: #fff; color: var(--vn-ink); line-height: 1.45;
}
.vn-body .vn-search input[type=search] { padding-left: 37px; background: #f9f8fc; }
.vn-body textarea { resize: vertical; }
.vn-body input[type=checkbox] { accent-color: var(--vn-primary); width: 1rem; height: 1rem; }
.vn-primary, .vn-secondary, .vn-icon-button, .vn-menu-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700;
    min-height: 41px; border: 1px solid transparent; border-radius: 10px; padding: 8px 13px;
    line-height: 1.25; text-decoration: none; overflow-wrap: anywhere;
}
.vn-body .vn-primary { background: var(--vn-primary); color: white; }
.vn-primary:hover { filter: brightness(1.08); }
.vn-body .vn-secondary, .vn-body .vn-icon-button, .vn-body .vn-menu-button { background: #fff; border-color: var(--vn-line); color: var(--vn-ink); }
.vn-secondary:hover, .vn-icon-button:hover { border-color: #a58ed3; }
.vn-body .vn-icon-button { padding: 7px; min-width: 37px; min-height: 37px; flex-shrink: 0; }
.vn-menu-button { display: none; }
.vn-main { max-width: 1500px; padding: clamp(16px, 3vw, 38px) clamp(16px, 3vw, 42px) 48px; margin: 0 auto; }
.vn-main h1 { font-size: clamp(2rem, 4vw, 3.25rem); overflow-wrap: anywhere; }
.vn-main h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); overflow-wrap: anywhere; }
.vn-main h3 { font-size: 1.07rem; overflow-wrap: anywhere; }
.vn-overline { font-size: .69rem; font-weight: 830; letter-spacing: .15em; color: #6340bd; }
.vn-overline span { margin-inline: .3em; }
.vn-page-head p:not(.vn-overline) { max-width: 58ch; color: var(--vn-muted); }
.vn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vn-block { margin-top: 28px; }
.vn-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.vn-section-head .vn-overline { margin-bottom: .3rem; }
.vn-section-head a { font-size: .81rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.vn-section-head a:hover { text-decoration: underline; }
.vn-tone-violet { --vn-tone: #ede6ff; --vn-tone-ink: #5a399f; }
.vn-tone-mint { --vn-tone: #dcf2eb; --vn-tone-ink: #235f51; }
.vn-tone-sand { --vn-tone: #faeedb; --vn-tone-ink: #805122; }
.vn-tone-rose { --vn-tone: #f9e4ef; --vn-tone-ink: #8b3e67; }
.vn-tone-blue { --vn-tone: #e1eafa; --vn-tone-ink: #385b93; }
.vn-color-dot { width: .68rem; height: .68rem; border-radius: 50%; background: var(--vn-tone, #e8ddfa); border: 1px solid var(--vn-tone-ink, #7556ae); flex-shrink: 0; }
.vn-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vn-metric, .vn-panel, .vn-note-card, .vn-notebook-card, .vn-shortcuts > a {
    background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: 15px; min-width: 0;
}
.vn-body .vn-metric { padding: clamp(12px, 2vw, 19px); text-decoration: none; color: var(--vn-ink); display: grid; align-content: start; gap: 4px; }
.vn-metric-icon { display: inline-grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: var(--vn-tone, #eee7fb); color: var(--vn-tone-ink, #5a399f); }
.vn-metric strong { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; }
.vn-metric > span:not(.vn-metric-icon) { color: var(--vn-muted); font-size: .84rem; font-weight: 650; }
.vn-metric small, .vn-mini { color: var(--vn-muted); font-size: .76rem; }
.vn-panel { padding: clamp(16px, 2.1vw, 25px); }
.vn-panel > p { margin: 9px 0 14px; color: var(--vn-muted); }
.vn-dashboard-grid, .vn-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.vn-feed-row, .vn-shortcuts > a {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 5px; color: var(--vn-ink) !important;
    text-decoration: none; overflow-wrap: anywhere;
}
.vn-feed-row + .vn-feed-row { border-top: 1px solid var(--vn-line); }
.vn-feed-row > span, .vn-shortcuts > a > span { min-width: 0; }
.vn-feed-row small, .vn-shortcuts small { color: var(--vn-muted); display: block; }
.vn-feed-row > .vn-icon:last-child, .vn-shortcuts > a > .vn-icon:last-child { margin-left: auto; color: var(--vn-primary); }
.vn-feed-row:hover strong, .vn-shortcuts > a:hover strong { text-decoration: underline; }
.vn-date { padding: 5px 8px; background: #eee8f9; color: #503489; border-radius: 7px; font-size: .78rem; font-weight: 760; flex: 0 0 auto; }
.vn-date.is-late { background: #f9e6e9; color: #8c3349; }
.vn-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vn-shortcuts > a { padding: 13px; }
.vn-shortcuts > a > .vn-icon:first-child { color: #7252c7; }
.vn-page-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
.vn-page-head h1 { margin: .4rem 0 .55rem; }
.vn-library-tools { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
.vn-switch { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--vn-line); border-radius: 12px; background: white; max-width: 100%; }
.vn-switch a { color: var(--vn-muted); padding: 7px 10px; text-decoration: none; border-radius: 8px; font-size: .83rem; font-weight: 700; white-space: nowrap; }
.vn-switch a[aria-current="page"] { background: #eee7fa; color: #512ca2; }
.vn-filters { display: flex; flex-wrap: wrap; align-items: start; gap: 7px; }
.vn-filters label { width: min(150px, 100%); min-width: 100px; }
.vn-filter-note, .vn-board-hint { font-size: .82rem; color: var(--vn-muted); margin-bottom: 12px !important; }
.vn-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: stretch; }
.vn-note-list { display: grid; gap: 8px; }
.vn-note-list .vn-note-card .vn-preview { -webkit-line-clamp: 1; }
.vn-note-card, .vn-notebook-card { position: relative; padding: 15px; border-top: 4px solid var(--vn-tone, #eee7fb); overflow-wrap: anywhere; }
.vn-body .vn-notebook-card { color: var(--vn-ink); text-decoration: none; }
.vn-notebook-card h2 { margin: 8px 0 5px; }
.vn-notebook-card p, .vn-notebook-card small { color: var(--vn-muted); }
.vn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.vn-card-top .vn-chip { background: var(--vn-tone, #eee7fb); color: var(--vn-tone-ink, #5a399f); border-radius: 20px; padding: 3px 9px; font-size: .71rem; font-weight: 720; }
.vn-favorite { color: #7b5120; }
.vn-note-card h3 a { color: var(--vn-ink); text-decoration: none; }
.vn-note-card h3 a:hover { text-decoration: underline; }
.vn-preview {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-line;
    color: var(--vn-muted); font-size: .86rem; margin-top: 7px !important;
}
.vn-card-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: .75rem; }
.vn-card-details { display: flex; flex-wrap: wrap; gap: 9px; color: var(--vn-muted); font-size: .76rem; margin-top: 8px; }
.vn-card-details .vn-icon { width: .95rem; height: .95rem; }
.vn-board {
    display: grid; grid-auto-flow: column; overflow-x: auto;
    overscroll-behavior-inline: contain; scroll-snap-type: x proximity;
}
.vn-lane { min-width: 0; scroll-snap-align: start; }
.vn-lane-head { display: flex; align-items: center; }
.vn-lane-cards { display: grid; }
.vn-lane-empty { font-size: .8rem; text-align: center; }
.vn-lane-more { display: inline-block; padding: 8px 3px 0; font-size: .78rem; }
.vn-lane .vn-note-card[draggable=true] { cursor: grab; }
.vn-lane .vn-note-card.is-dragging { opacity: .56; }
.vn-move { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 10px; }
.vn-body .vn-move select { font-size: .78rem; padding: 5px; }
.vn-empty { padding: 32px 20px; text-align: center; background: #fff; border: 1px dashed #dcd3ea; border-radius: 15px; }
.vn-empty h2 { margin: 9px 0; }
.vn-empty p { color: var(--vn-muted); margin-bottom: 10px; }
.vn-empty.compact { background: #faf9fc; border: 0; text-align: left; padding: 15px; }
.vn-empty.compact p:last-child { margin-bottom: 0; }
.vn-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vn-settings { max-width: 850px; }
.vn-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vn-span { grid-column: 1/-1; }
.vn-fields label, .vn-editor label { display: grid; gap: 4px; font-weight: 700; font-size: .86rem; min-width: 0; }
.vn-field { display: grid; gap: 4px; }
.vn-fieldset { min-width: 0; border: 1px solid var(--vn-line); padding: 12px; border-radius: 12px; }
.vn-fieldset legend { font-weight: 760; padding: 0 4px; }
.vn-fieldset p { margin: 0 0 10px; color: var(--vn-muted); font-size: .84rem; }
.vn-disclosure { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--vn-line); }
.vn-disclosure summary { cursor: pointer; color: var(--vn-primary); font-weight: 700; font-size: .86rem; }
.vn-disclosure p { margin: 9px 0; color: var(--vn-muted); }
.vn-body .vn-danger { color: #842944; }
.vn-return { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-weight: 700; text-decoration: none; }
.vn-editor { grid-template-columns: minmax(0, 1fr) minmax(235px, 30%); }
.vn-writing, .vn-properties { display: grid; gap: 12px; }
.vn-writing textarea { font-size: 1rem; min-height: 270px; }
.vn-form-foot, .vn-note-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vn-form-foot span { font-size: .84rem; color: var(--vn-muted); }
.vn-form-foot span[data-state=error] { color: #8d2a46; }
.vn-properties .vn-check { display: flex; align-items: center; gap: 7px; }
.vn-properties small { color: var(--vn-muted); }
.vn-reading { color: var(--vn-ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.vn-reading p { margin: 9px 0; }
.vn-reading code { background: #f0eaf9; padding: 1px 4px; border-radius: 3px; }
.vn-note-bottom { justify-content: space-between; margin-top: 14px; }
.vn-note-bottom > a { font-size: .84rem; }
.vn-notice, .vn-alert { border-radius: 9px; margin: 0 0 14px !important; padding: 10px 14px; background: #e0f2e9; color: #245c47; }
.vn-alert { background: #f8e6ed; color: #802b49; }
.vn-integrated { min-width: 0; padding: 12px clamp(10px, 2vw, 22px); }
.vn-integrated .cw { min-width: 0; }
.vn-gate-page { min-height: 100dvh; display: grid; align-content: center; justify-items: center; padding: 20px; background: radial-gradient(ellipse at 55% 5%, #e4d9fb, #f6f5fa 58%); }
.vn-gate { max-width: 510px; width: 100%; padding: clamp(22px, 5vw, 45px); background: #fff; border: 1px solid var(--vn-line); border-radius: 24px; box-shadow: 0 15px 38px #30205815; }
.vn-gate-mark { margin-bottom: 17px; }
.vn-gate h1 { margin: .5rem 0; font-size: clamp(1.9rem, 5vw, 2.7rem); }
.vn-gate p:not(.vn-overline) { margin-bottom: 14px; color: var(--vn-muted); }
.vn-gate form { margin: 16px 0 13px; }
@media (max-width: 1100px) {
    .vn-shell { grid-template-columns: 211px minmax(0, 1fr); }
    .vn-sidebar { padding-inline: 11px; }
    .vn-crumb { display: none; }
    .vn-search { width: min(280px, 58%); margin-right: auto; }
    .vn-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 750px) {
    .vn-shell { grid-template-columns: minmax(0, 1fr); }
    .vn-sidebar { position: static; height: auto; max-height: 60dvh; padding: 10px 15px; }
    .vn-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 5px; }
    .vn-nav-title, .vn-nav-label { grid-column: 1/-1; }
    .vn-sidebar-end { padding-top: 8px; }
    .vn-topbar { gap: 7px; min-height: 58px; }
    .vn-menu-button { display: inline-flex; padding: 8px; }
    .vn-menu-button span { display: none; }
    .vn-topbar .vn-new { padding: 8px; font-size: .79rem; }
    .vn-topbar .vn-search { flex: 1; width: auto; }
    .vn-dashboard-grid, .vn-editor { grid-template-columns: minmax(0, 1fr); }
    .vn-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .vn-page-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .vn-gallery, .vn-shortcuts, .vn-fields { grid-template-columns: minmax(0, 1fr); }
    .vn-library-tools { display: grid; }
    .vn-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .vn-filters label { width: auto; min-width: 0; }
    .vn-switch a { padding-inline: 7px; }
    .vn-topbar { padding-inline: 9px; }
    .vn-topbar .vn-new .vn-icon { display: none; }
}

.vn-capture { display: grid; gap: 12px; }
.vn-capture > button { justify-self: start; }
.vn-capture-wide { grid-column: 1 / -1; }
.vn-capture .vn-capture-check { display: flex; align-items: center; gap: 8px; }
.vn-table-wrap { margin-block-start: 18px; overflow-x: auto; }
.vn-data-table { width: 100%; min-width: 34rem; border-collapse: collapse; text-align: start; }
.vn-data-table th, .vn-data-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid #dedde8; }
.vn-panel pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-capture-check input { width: auto; }
.vn-today-task { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; align-items: center; padding: 12px 0; }
.vn-today-task + .vn-today-task { border-top: 1px solid var(--vn-line); }
.vn-today-task small, .vn-today-task a { display: block; }
.vn-today-task small { color: var(--vn-muted); }

.vn-project-card { margin-top: 10px; }
.vn-project-card h3 { margin: 4px 0 8px; overflow-wrap: anywhere; }
.vn-project-card small { color: var(--vn-muted); }
.vn-project-card .vn-fields { grid-template-columns: minmax(0, 1fr); }
.vn-project-card .vn-disclosure { margin: 0; }

.vn-project-invite { max-width: 36rem; }

/* Dashboard and shared Kanban lanes */
.vn-command {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px;
    padding: clamp(22px, 3.4vw, 32px); border: 1px solid #3e2b65; border-radius: 20px;
    color: #fff; background: radial-gradient(ellipse at 96% -20%, #6d4ba4 0, transparent 64%), linear-gradient(115deg, #211833, #342353);
    box-shadow: 0 12px 28px #25153f1a;
}
.vn-command h1 { margin-block: .25rem .5rem; font-size: clamp(1.9rem, 4vw, 3rem); }
.vn-command .vn-overline { color: #d9c8ff; }
.vn-command p:not(.vn-overline) { max-width: 55ch; color: #e5dcf4; }
.vn-command .vn-primary { background: #d9c3ff; border-color: #e3d2ff; color: #261343; }
.vn-command .vn-secondary { background: #4a356b; border-color: #876da6; color: #fff; }
.vn-board-shell {
    padding: clamp(12px, 2vw, 22px); border: 1px solid #d9d0e6; border-radius: 20px;
    background: #fff; box-shadow: 0 10px 30px #30205309; min-width: 0;
}
.vn-command + .vn-board-shell { margin-top: 20px; }
.vn-board-heading, .vn-board-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vn-board-heading { justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.vn-board-heading .vn-secondary { font-size: .84rem; }
.vn-board-title .vn-overline { margin-bottom: 4px; }
.vn-board-icon, .vn-tile-icon {
    display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
    color: #5c36ad; background: #eee5ff;
}
.vn-board-shell .vn-board-hint { margin: 0 0 12px !important; }
.vn-board-nav { display: none; }
.vn-board {
    grid-auto-columns: minmax(224px, 1fr); align-items: stretch; gap: 12px; padding: 12px;
    border: 1px solid #e2dce9; border-radius: 15px; background: #f8f7fb;
    scrollbar-width: thin; scrollbar-color: #aa9bbe #ede9f3;
}
.vn-lane {
    --vn-lane-wash: #eeeaf6; --vn-lane-line: #d1c7e3; --vn-lane-accent: #7252a5;
    background: var(--vn-lane-wash); border: 1px solid var(--vn-lane-line); border-top: 4px solid var(--vn-lane-accent);
    border-radius: 13px; min-height: 176px; padding: 10px;
}
.vn-lane[data-note-lane=inbox] { --vn-lane-wash: #f9f0e3; --vn-lane-line: #e4d2b5; --vn-lane-accent: #94621f; }
.vn-lane[data-note-lane=todo] { --vn-lane-wash: #eaf0fb; --vn-lane-line: #c6d3e9; --vn-lane-accent: #3e60a4; }
.vn-lane[data-note-lane=doing] { --vn-lane-wash: #eee5fc; --vn-lane-line: #d9caee; --vn-lane-accent: #683caa; }
.vn-lane[data-note-lane=done] { --vn-lane-wash: #e2f2eb; --vn-lane-line: #bddccd; --vn-lane-accent: #2c745a; }
.vn-lane.is-drop { background: #f2e6fe; outline: 2px dashed #6c3cbe; outline-offset: -4px; }
.vn-lane-head { gap: 8px; margin-bottom: 10px; min-height: 36px; }
.vn-lane-head h3 { color: #211a32; font-size: .98rem; margin-right: auto; }
.vn-lane-dot { width: .62rem; height: .62rem; flex: 0 0 auto; background: var(--vn-lane-accent); border-radius: 50%; }
.vn-lane-head .vn-lane-count {
    color: var(--vn-lane-accent); background: #fff; border: 1px solid var(--vn-lane-line);
    font-size: .74rem; font-weight: 800; line-height: 1.25; padding: 4px 7px; border-radius: 20px;
}
.vn-lane-head .vn-icon-button { min-width: 34px; min-height: 34px; padding: 4px; border-color: var(--vn-lane-line); }
.vn-lane-empty {
    border: 1px dashed var(--vn-lane-line); background: #ffffff8c; border-radius: 9px;
    padding: 16px 8px; color: #5c526d;
}
.vn-lane-cards { gap: 10px; max-block-size: min(56vh, 385px); overflow-y: auto; scrollbar-width: thin; }
.vn-lane .vn-note-card { padding: 12px; box-shadow: 0 3px 9px #32234510; border-color: var(--vn-lane-line); }
.vn-lane .vn-project-card { margin: 0; }
.vn-lane .vn-note-card:hover { border-color: var(--vn-lane-accent); }
.vn-lane .vn-note-card[aria-busy=true] { opacity: .66; }
.vn-lane .vn-note-card h3 { font-size: 1rem; margin: 7px 0; }
.vn-grip { color: #6e647d; font-weight: 750; line-height: 1; margin-inline-start: auto; font-size: 1.15rem; cursor: grab; }
.vn-kind {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px;
    font-size: .72rem; font-weight: 740; background: #eee9f6; color: #573883;
}
.vn-kind .vn-icon, .vn-card-details .vn-icon, .vn-card-reference .vn-icon { width: .9rem; height: .9rem; }
.vn-kind-task { background: #e5edfb; color: #2d4f88; }
.vn-kind-content { background: #f9e8f1; color: #843861; }
.vn-card-details { gap: 6px 9px; }
.vn-card-details .vn-late { background: #f9e4e7; color: #8a2a3d; padding: 1px 5px; border-radius: 5px; }
.vn-priority { background: #f2eff6; color: #554866; padding: 2px 6px; border-radius: 5px; }
.vn-priority.vn-priority-high { background: #faeadc; color: #864023; }
.vn-card-reference { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .76rem; font-weight: 700; }
.vn-move .vn-icon-button { min-width: 36px; min-height: 36px; }
.vn-task-move:has([data-note-complete]:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto auto; }
.vn-body .vn-finish-task { color: #28664f; background: #eff8f2; border-color: #cfe3d5; }
.vn-board-feedback { color: #245c47; background: #e7f4eb; padding: 7px 11px; margin-bottom: 10px !important; border-radius: 8px; font-size: .84rem; }
.vn-board-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 214px), 1fr)); gap: 10px; }
.vn-body .vn-board-tile {
    display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 12px;
    background: #fff; border: 1px solid #ded6ea; border-radius: 12px; color: var(--vn-ink); text-decoration: none;
}
.vn-board-tile:hover { border-color: #8b70be; box-shadow: 0 5px 15px #30205313; }
.vn-board-tile .vn-tile-icon { background: var(--vn-tone, #eee8f6); color: var(--vn-tone-ink, #624389); }
.vn-board-tile > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vn-board-tile strong, .vn-board-tile small { display: block; }
.vn-board-tile small { color: var(--vn-muted); font-size: .74rem; }
.vn-board-tile > .vn-icon { color: #6340a9; width: 1rem; height: 1rem; }
.vn-body .vn-tile-new { border-style: dashed; background: #faf8fe; }
.vn-board-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; align-items: start; }
.vn-board-tool { padding: 8px 12px; border: 1px solid #e4ddec; border-radius: 9px; background: #fbfaff; }
.vn-board-tool summary { color: #56348d; cursor: pointer; font-weight: 700; font-size: .86rem; }
.vn-board-tool form { margin-top: 12px; }
.vn-board-tool .vn-fields { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.vn-project-list { display: grid; gap: 10px; }
.vn-project-calendar .vn-actions { margin-block: 12px; }

/* Writing canvas, metadata and checklist */
.vn-compose { grid-template-columns: minmax(0, 1fr) minmax(235px, 27%); gap: 16px; }
.vn-compose .vn-writing, .vn-compose .vn-properties { gap: 18px; padding: clamp(15px, 2.4vw, 25px); border-color: #ded5ea; }
.vn-compose .vn-properties { position: sticky; top: 14px; }
.vn-compose .vn-title-field > input[name=title] {
    font-size: clamp(1.2rem, 2vw, 1.62rem); font-weight: 770; letter-spacing: -.028em; padding: 12px 14px;
    border-color: #d6cae7; background: #fbf9fe;
}
.vn-compose .vn-title-field > input[name=title]::placeholder { color: #706580; opacity: 1; }
.vn-compose-head { margin-bottom: 18px; }
.vn-property-head { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid #e8e1f0; }
.vn-property-head h2 { font-size: 1.12rem; }
.vn-rich { display: grid; gap: 8px; min-width: 0; }
.vn-rich-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vn-mode-button {
    border: 1px solid #d9cfe8; border-radius: 8px; padding: 5px 9px; min-height: 36px;
    color: #56358f; background: #faf7ff; font-size: .8rem !important; font-weight: 700;
}
.vn-mode-button[aria-pressed=true] { background: #eae0fa; }
.vn-rich-visual { min-width: 0; border: 1px solid #d6cae7; border-radius: 12px; background: #fff; }
.vn-rich-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px;
    background: #f4effb; border-bottom: 1px solid #dfd3ed; border-radius: 11px 11px 0 0;
}
.vn-rich-toolbar select { min-height: 36px; padding: 6px 8px; font-size: .83rem; }
.vn-rich-group { display: inline-flex; align-items: center; gap: 3px; }
.vn-rich-toolbar button {
    display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 4px 6px;
    border: 1px solid transparent; border-radius: 6px; background: transparent; color: #392853; font-size: .86rem; font-weight: 760;
}
.vn-rich-toolbar button:hover, .vn-rich-toolbar button[aria-pressed=true] { background: #e4d7f6; border-color: #d1bee9; }
.vn-rich-toolbar .vn-icon { width: 1.06rem; height: 1.06rem; }
.vn-rich-link {
    display: flex; align-items: end; flex-wrap: wrap; gap: 8px; padding: 10px 12px;
    background: #f9f6ff; border-bottom: 1px solid #e3daec;
}
.vn-rich-link label { flex: 1 1 190px; }
.vn-rich-editable {
    position: relative; min-height: 256px; padding: clamp(13px, 2.4vw, 23px);
    line-height: 1.68; white-space: pre-wrap; overflow-wrap: anywhere; outline-offset: -3px;
}
.vn-rich-editable[data-empty=true]::before {
    position: absolute; content: attr(data-placeholder); color: #706580; pointer-events: none;
}
.vn-rich-editable p { margin: 0 0 .8em; }
.vn-rich-editable :last-child { margin-bottom: 0; }
.vn-reading h2, .vn-reading h3, .vn-reading h4 { margin: .7em 0 .45em; line-height: 1.3; }
.vn-reading h2 { font-size: 1.45rem; }
.vn-reading h3 { font-size: 1.22rem; }
.vn-reading h4 { font-size: 1.08rem; }
.vn-reading ul, .vn-reading ol { margin: .45rem 0 .8rem; padding-inline-start: 1.6rem; }
.vn-reading blockquote {
    border-inline-start: 3px solid #936bc7; margin: .55rem 0 .8rem; padding: .45rem .8rem;
    color: #524266; background: #f8f4fe;
}
.vn-rich-editable[aria-invalid=true] { box-shadow: inset 0 0 0 2px #b44963; }
.vn-rich-message { font-size: .84rem; color: var(--vn-muted); }
.vn-rich-message[data-state=error] { color: #8c2a44; }
.vn-check-editor {
    display: grid; gap: 10px; border: 1px solid #e2d9ee; border-radius: 12px;
    padding: 12px; background: #fbf9fe; min-width: 0;
}
.vn-check-head, .vn-check-head > div { display: flex; align-items: center; gap: 8px; }
.vn-check-head { justify-content: space-between; flex-wrap: wrap; }
.vn-check-head h2 { font-size: 1rem; }
.vn-check-icon { color: #6941ac; }
.vn-check-count, .vn-check-limit { font-size: .78rem; color: #5b4c72; font-weight: 680; }
.vn-check-editor progress { display: block; width: 100%; height: 7px; accent-color: #6441b6; margin-bottom: 10px; }
.vn-check-empty { color: #61566f; font-size: .85rem; margin-bottom: 9px !important; }
.vn-check-rows { display: grid; gap: 5px; list-style: none; padding: 0; margin: 0 0 9px; }
.vn-check-rows:empty { margin: 0; }
.vn-check-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.vn-compose .vn-check-toggle { display: grid; place-items: center; width: 42px; min-height: 42px; cursor: pointer; }
.vn-check-toggle input[type=checkbox] { width: 19px; height: 19px; }
.vn-check-rows .vn-check-remove { min-width: 42px; min-height: 42px; color: #6e4265; font-size: 1.15rem; }
.vn-check-rows .is-done input[type=text] { color: #5a6a62; background: #f2f8f4; text-decoration: line-through; }
.vn-compose .vn-check-editor textarea { min-height: 110px; }
.vn-compose-foot {
    grid-column: 1/-1; position: sticky; bottom: 10px; z-index: 2; padding: 10px 13px;
    border: 1px solid #d9d0e6; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px #30205316;
}
.vn-task-state { justify-self: start; border-radius: 7px; padding: 5px 10px; font-weight: 740; font-size: .85rem; background: #eaf0fb; color: #345595; }
.vn-task-state[data-task-stage=doing] { background: #eee5fc; color: #62429f; }
.vn-task-state[data-task-stage=done] { background: #e2f2eb; color: #27694f; }

@media (max-width: 1100px) {
    .vn-board-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .vn-board-nav a {
        display: inline-flex; align-items: center; min-height: 36px; padding: 4px 9px;
        border: 1px solid #e0d7ec; border-radius: 7px; background: #fbf9fe; font-size: .8rem; font-weight: 700; text-decoration: none;
    }
}
@media (max-width: 900px) {
    .vn-command { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .vn-compose { grid-template-columns: minmax(0, 1fr); }
    .vn-compose .vn-properties { position: static; }
}
@media (max-width: 750px) {
    .vn-board { grid-auto-columns: minmax(218px, 87%); gap: 10px; padding: 8px; }
    .vn-lane-head .vn-icon-button, .vn-move .vn-icon-button { min-width: 42px; min-height: 42px; }
    .vn-board-tools { grid-template-columns: minmax(0, 1fr); }
    .vn-rich-toolbar button { min-width: 42px; min-height: 42px; }
    .vn-rich-toolbar select, .vn-board-nav a { min-height: 40px; }
    .vn-rich-editable { min-height: 210px; }
    .vn-compose-foot { position: static; }
}