/* Notea 7.8.3.0 — Desktop/tablet Notes workspace.
   This file preserves cascade order from the consolidated legacy stylesheet. */
@media (min-width:761px) and (max-width:1199px){
  .portal[data-active-module="hub"] .portal-main{padding:23px 24px 34px!important}
  .desktop-hub-v2{gap:17px}
  .desktop-hub-topbar{grid-template-columns:1fr;gap:16px}.desktop-hub-tools{grid-template-columns:minmax(0,1fr) 46px auto;max-width:none}.desktop-hub-welcome h1{font-size:clamp(35px,5vw,48px)}
  .desktop-hub-cards{gap:14px}.desktop-hub-feature{min-height:220px;padding:21px}.desktop-hub-feature-copy{left:21px;bottom:20px}.desktop-hub-feature-copy strong{font-size:19px}.desktop-hub-feature-copy small{font-size:10px}.desktop-hub-feature-cta{margin-top:11px;padding:7px 9px;font-size:9px}.desktop-hub-feature-icon{left:21px;top:21px;width:49px;height:49px}.desktop-hub-feature-icon svg{width:24px;height:24px}
  .desktop-hub-dashboard-grid{grid-template-columns:1fr}.desktop-hub-side-stack{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}.desktop-hub-recent-panel,.desktop-hub-quick-panel{height:100%}
}

@media (min-width:761px) and (max-width:930px){
  .desktop-hub-tools{grid-template-columns:minmax(0,1fr) 44px}.desktop-hub-new-note{grid-column:1/-1;width:max-content}.desktop-hub-search{height:50px}.desktop-hub-bell{width:44px;height:44px}.desktop-hub-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.desktop-hub-feature-ministry{grid-column:1/-1}.desktop-hub-feature{min-height:205px}.desktop-hub-feature-ministry .desktop-hub-feature-copy{max-width:45%}.desktop-hub-feature-ministry .desktop-hub-feature-art{width:32%;right:7%}.desktop-hub-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.desktop-hub-side-stack{grid-template-columns:1fr}.desktop-hub-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* =========================================================
   NOTEA — DESKTOP / TABLET NOTES WORKSPACE
   Approved Notes concept:
   - second column becomes a quiet folder tree
   - max 2 folder levels
   - loose pages remain first-class
   - favorites + tags are search filters
   - no permanent Recents section
   - open white/theme surface (no paper-card effect)
   - right rail: Outline + Quick notes
   Mobile (<=760px) intentionally keeps the previous layout.
   ========================================================= */

@media (min-width:761px){
  /* Notes library header */
  .app>.sidebar{
    display:flex!important;
    flex-direction:column!important;
    background:var(--c-paper,var(--paper))!important;
    border-right:1px solid var(--c-line,var(--line))!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .app>.sidebar .sidebar-header{
    min-height:60px!important;
    padding:0 14px 0 18px!important;
    border-bottom:0!important;
    background:var(--c-paper,var(--paper))!important;
  }
  .notes-library-heading{
    font-family:var(--c-ui,var(--ui))!important;
    font-size:22px!important;
    font-weight:780!important;
    letter-spacing:-.035em!important;
  }
  .sidebar-header-actions{gap:0!important;align-items:center!important}
  .desktop-library-add{
    width:38px!important;height:38px!important;min-width:38px!important;margin-right:14px!important;
    border:0!important;border-radius:50%!important;
    display:grid!important;place-items:center!important;
    background:var(--c-accent-deep,var(--accent))!important;color:#fff!important;
    font-size:23px!important;font-weight:350!important;line-height:1!important;
    box-shadow:0 7px 18px color-mix(in srgb,var(--c-accent-deep,var(--accent)) 22%,transparent)!important;
  }
  .desktop-library-add:hover{transform:translateY(-1px)!important}
  .sidebar-collapse-button{
    width:34px!important;height:34px!important;border:0!important;background:transparent!important;margin-left:2px!important;
  }

  /* The old 3-card creator remains unchanged for mobile only. */
  .app>.sidebar .compact-actions{display:none!important}
  .app>.sidebar .pages-tools{
    position:relative!important;
    padding:8px 14px 10px!important;
    border:0!important;background:var(--c-paper,var(--paper))!important;
  }
  .app>.sidebar .search-box{
    height:42px!important;padding:0 7px 0 12px!important;gap:7px!important;
    border:1px solid var(--c-line,var(--line))!important;border-radius:12px!important;
    background:var(--c-paper,var(--paper))!important;box-shadow:none!important;
  }
  .app>.sidebar .search-box>span{font-size:18px!important;color:var(--c-muted,var(--muted))!important}
  .app>.sidebar .search-box input{font-size:12px!important;color:var(--c-ink,var(--text))!important}
  .search-favorite,.search-tag-filter{
    width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;
    border:0!important;border-radius:8px!important;background:transparent!important;
    color:var(--c-muted,var(--muted))!important;display:grid!important;place-items:center!important;
    font-size:0!important;line-height:1!important;align-self:center!important;justify-self:center!important;
  }
  .search-favorite svg,.search-tag-filter svg{width:17px!important;height:17px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .search-favorite.is-active svg{fill:currentColor!important;stroke:currentColor!important}
  .search-favorite:hover,.search-tag-filter:hover,
  .search-favorite.is-active,.search-tag-filter.is-active{
    background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important
  }

  .active-library-filters{display:flex!important;align-items:center!important;gap:8px!important;padding:8px 2px 0!important;min-height:18px!important}
  .active-library-filters[hidden]{display:none!important}
  .active-library-filter-chip{
    border:1px solid color-mix(in srgb,var(--c-accent,var(--accent)) 18%,var(--c-line,var(--line)))!important;
    background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important;
    border-radius:999px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;
    padding:4px 9px!important;font-size:10px!important;font-weight:650!important;line-height:1!important
  }
  .active-library-filter-chip svg{width:12px!important;height:12px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .active-library-filter-chip b{font-size:13px!important;font-weight:500!important;line-height:1!important;opacity:.85!important}
  .active-library-filter-chip:hover{filter:brightness(.98)!important}

  .desktop-create-menu,.library-tag-filter{
    position:absolute!important;z-index:80!important;right:14px!important;top:58px!important;
    width:210px!important;padding:6px!important;border:1px solid var(--c-line,var(--line))!important;
    border-radius:12px!important;background:var(--c-paper,var(--paper))!important;
    color:var(--c-ink,var(--text))!important;box-shadow:0 18px 48px color-mix(in srgb,var(--c-ink,var(--text)) 14%,transparent)!important;
  }
  .desktop-create-menu[hidden],.library-tag-filter[hidden]{display:none!important}
  .desktop-create-menu{top:0!important;right:10px!important}
  .desktop-create-menu button{
    width:100%!important;min-height:42px!important;border:0!important;border-radius:10px!important;background:transparent!important;
    display:grid!important;grid-template-columns:34px 1fr!important;align-items:center!important;gap:9px!important;
    padding:7px 10px!important;text-align:left!important;color:var(--c-ink,var(--text))!important
  }
  .desktop-create-menu button:hover{background:var(--c-accent-soft,var(--accent-soft))!important}
  .desktop-create-menu button span{
    width:30px!important;height:30px!important;border-radius:10px!important;display:grid!important;place-items:center!important;
    color:var(--c-accent-deep,var(--accent))!important;background:color-mix(in srgb,var(--c-accent-soft,var(--accent-soft)) 75%,transparent)!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent,var(--accent)) 16%,transparent)!important
  }
  .desktop-create-menu button span svg{
    width:17px!important;height:17px!important;display:block!important;fill:none!important;stroke:currentColor!important;
    stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important
  }
  .desktop-create-menu button b{font-size:11.25px!important;font-weight:680!important}

  .library-tag-filter{top:56px!important;right:14px!important;width:228px!important}
  .library-tag-filter header{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:5px 6px 8px!important}
  .library-tag-filter header strong{font-size:12px!important}
  .library-tag-filter header button{width:26px!important;height:26px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--c-muted,var(--muted))!important}
  .library-tag-filter>button,.library-tag-filter [data-tag-filter-options]>button{
    width:100%!important;min-height:34px!important;border:0!important;border-radius:8px!important;background:transparent!important;
    color:var(--c-ink,var(--text))!important;padding:7px 9px!important;text-align:left!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;font-size:10.5px!important
  }
  .library-tag-filter>button:hover,.library-tag-filter [data-tag-filter-options]>button:hover,
  .library-tag-filter>button.is-active,.library-tag-filter [data-tag-filter-options]>button.is-active{
    background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important
  }
  .library-tag-filter small{font-size:9px!important;color:var(--c-muted,var(--muted))!important}
  .tag-filter-empty{display:block!important;padding:12px 8px!important;line-height:1.45!important}

  .app>.sidebar .reminders-box{display:none!important}
  .app>.sidebar .bulk-bar{
    margin:0 14px 8px!important;padding:7px 8px!important;border-radius:10px!important;
    background:var(--c-accent-soft,var(--accent-soft))!important
  }

  /* Folder tree */
  .app>.sidebar .page-list{
    flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    display:flex!important;flex-direction:column!important;gap:1px!important;
    padding:4px 12px 12px!important;background:var(--c-paper,var(--paper))!important;
  }
  .desktop-library-section-title,.desktop-loose-title{
    min-height:34px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    padding:5px 5px 3px!important;color:var(--c-ink,var(--text))!important
  }
  .desktop-library-section-title strong,.desktop-loose-title strong{
    font-size:10.5px!important;font-weight:780!important;letter-spacing:.01em!important
  }
  .desktop-library-section-title button{
    width:27px!important;height:27px!important;border:0!important;border-radius:8px!important;background:transparent!important;
    color:var(--c-muted,var(--muted))!important;font-size:18px!important
  }
  .desktop-library-section-title button:hover{background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important}
  .desktop-library-empty-hint,.loose-empty-hint{
    display:block!important;padding:5px 9px 10px!important;color:var(--c-muted,var(--muted))!important;font-size:9px!important;line-height:1.4!important
  }

  .desktop-folder-node{
    --folder-color:var(--c-accent,var(--accent));--folder-soft:var(--c-accent-soft,var(--accent-soft));
    position:relative!important;margin:0!important;padding:0!important;border:0!important;border-radius:10px!important;background:transparent!important;
  }
  .desktop-folder-node[data-folder-color="purple"]{--folder-color:#8d78c4;--folder-soft:color-mix(in srgb,#8d78c4 13%,var(--c-paper))}
  .desktop-folder-node[data-folder-color="rose"]{--folder-color:#c56f8a;--folder-soft:color-mix(in srgb,#c56f8a 12%,var(--c-paper))}
  .desktop-folder-node[data-folder-color="green"]{--folder-color:#5d9b72;--folder-soft:color-mix(in srgb,#5d9b72 13%,var(--c-paper))}
  .desktop-folder-node[data-folder-color="amber"]{--folder-color:#bd8b3f;--folder-soft:color-mix(in srgb,#bd8b3f 13%,var(--c-paper))}
  .desktop-folder-node[data-folder-color="teal"]{--folder-color:#4d9896;--folder-soft:color-mix(in srgb,#4d9896 13%,var(--c-paper))}
  .desktop-folder-node.depth-1{margin-left:22px!important}
  .desktop-folder-head{
    position:relative!important;min-height:34px!important;display:grid!important;
    grid-template-columns:27px minmax(0,1fr) auto 26px 31px!important;align-items:center!important;gap:2px!important;
    padding:2px 3px!important;border-radius:9px!important
  }
  .desktop-folder-head:hover{background:color-mix(in srgb,var(--folder-soft) 66%,transparent)!important}
  .desktop-folder-node.drag-over>.desktop-folder-head{
    background:var(--folder-soft)!important;box-shadow:inset 0 0 0 1px var(--folder-color)!important
  }
  .desktop-folder-icon{
    width:26px!important;height:26px!important;border:0!important;border-radius:7px!important;background:var(--folder-soft)!important;
    color:var(--folder-color)!important;display:grid!important;place-items:center!important;padding:0!important
  }
  .desktop-folder-icon svg{width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.55!important;stroke-linejoin:round!important}
  .desktop-folder-toggle{
    min-width:0!important;border:0!important;background:transparent!important;color:var(--c-ink,var(--text))!important;
    display:flex!important;align-items:center!important;gap:5px!important;padding:0 2px!important;text-align:left!important
  }
  .desktop-folder-toggle strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10.5px!important;font-weight:650!important}
  .desktop-folder-toggle .folder-chevron{width:13px!important;height:13px!important;fill:none!important;stroke:var(--c-muted,var(--muted))!important;stroke-width:1.6!important;transition:.15s ease!important}
  .desktop-folder-toggle .folder-chevron.is-collapsed{transform:rotate(-90deg)!important}
  .desktop-folder-count{
    min-width:20px!important;text-align:right!important;color:var(--c-muted,var(--muted))!important;font-size:9px!important;padding-right:3px!important
  }
  .desktop-folder-action{
    width:25px!important;height:25px!important;border:0!important;border-radius:7px!important;background:transparent!important;
    color:var(--c-muted,var(--muted))!important;display:grid!important;place-items:center!important;padding:0!important;
    opacity:0!important;transition:.12s ease!important;font-size:14px!important;letter-spacing:-1px!important
  }
  .desktop-folder-head:hover>.desktop-folder-action,.desktop-folder-action:focus{opacity:1!important}
  .desktop-folder-action:hover{background:var(--c-paper,var(--paper))!important;color:var(--c-accent-deep,var(--accent))!important}
  .folder-inline-menu{
    position:absolute!important;z-index:95!important;right:3px!important;top:31px!important;width:178px!important;box-sizing:border-box!important;overflow:hidden!important;
    padding:5px!important;border:1px solid var(--c-line,var(--line))!important;border-radius:12px!important;
    background:var(--c-paper,var(--paper))!important;box-shadow:0 14px 36px color-mix(in srgb,var(--c-ink,var(--text)) 13%,transparent)!important
  }
  .folder-inline-menu[hidden]{display:none!important}
  .folder-inline-menu button{
    width:100%!important;min-height:32px!important;border:0!important;border-radius:7px!important;background:transparent!important;
    color:var(--c-ink,var(--text))!important;text-align:left!important;padding:6px 8px!important;font-size:10px!important
  }
  .folder-inline-menu button:hover{background:var(--c-accent-soft,var(--accent-soft))!important}
  .folder-inline-menu button.danger{color:var(--danger)!important}

  .desktop-page-row{
    min-height:42px!important;margin:1px 0!important;border-radius:9px!important;
    display:grid!important;grid-template-columns:27px minmax(0,1fr) 30px!important;align-items:center!important;gap:2px!important;
    padding:2px 3px!important;background:transparent!important
  }
  .desktop-folder-node.depth-1>.desktop-page-row{margin-left:5px!important}
  .desktop-page-row:hover{background:color-mix(in srgb,var(--c-accent-soft,var(--accent-soft)) 52%,transparent)!important}
  .desktop-page-row.is-active{
    background:var(--c-accent-soft,var(--accent-soft))!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent,var(--accent)) 22%,transparent)!important
  }
  .desktop-page-row.is-dragging{opacity:.48!important}
  .desktop-page-icon{
    width:25px!important;height:25px!important;border-radius:7px!important;display:grid!important;place-items:center!important;
    color:var(--c-accent-deep,var(--accent))!important;background:color-mix(in srgb,var(--c-accent-soft,var(--accent-soft)) 70%,transparent)!important
  }
  .desktop-page-icon svg{width:14px!important;height:14px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important;stroke-linejoin:round!important}
  .desktop-page-row .page-open{
    min-width:0!important;min-height:38px!important;padding:4px 4px!important;border:0!important;background:transparent!important;
    display:grid!important;align-content:center!important;text-align:left!important
  }
  .desktop-page-row .page-open strong{
    color:var(--c-ink,var(--text))!important;font-size:10.5px!important;font-weight:650!important;line-height:1.2!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }
  .desktop-page-row .page-open small{
    margin-top:3px!important;color:var(--c-muted,var(--muted))!important;font-size:8.5px!important;line-height:1!important
  }
  .desktop-page-row .page-delete{
    width:28px!important;height:28px!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;
    color:var(--c-muted,var(--muted))!important;opacity:0!important;display:grid!important;place-items:center!important;padding:0!important
  }
  .desktop-page-row:hover .page-delete,.desktop-page-row .page-delete:focus{opacity:1!important}
  .desktop-page-row .page-delete:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)!important;color:var(--danger)!important}
  .desktop-page-row .page-delete svg{width:14px!important;height:14px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.55!important}
  .desktop-page-row .page-select{grid-column:1!important;width:17px!important;height:17px!important;margin:0 4px!important}

  .desktop-loose-pages{
    margin:8px 0 0!important;padding:7px 0 4px!important;border:0!important;border-top:1px solid color-mix(in srgb,var(--c-line,var(--line)) 82%,transparent)!important;
    border-radius:0!important;background:transparent!important
  }
  .desktop-loose-pages.drag-over{
    background:var(--c-accent-soft,var(--accent-soft))!important;border-radius:10px!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent,var(--accent)) 46%,transparent)!important
  }
  .desktop-search-empty{
    margin:9px 3px!important;padding:10px!important;border-radius:9px!important;background:var(--c-paper-2,var(--panel))!important;
    color:var(--c-muted,var(--muted))!important;font-size:9.5px!important;text-align:center!important
  }
  .desktop-trash-row{
    width:100%!important;min-height:43px!important;margin-top:auto!important;padding:6px 8px!important;
    border:1px solid var(--c-line,var(--line))!important;border-radius:10px!important;background:var(--c-paper,var(--paper))!important;
    color:var(--c-ink,var(--text))!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto 14px!important;align-items:center!important;gap:7px!important;text-align:left!important
  }
  .desktop-trash-row:hover{background:var(--c-paper-2,var(--panel))!important}
  .desktop-trash-row>span{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
  .desktop-trash-row svg{width:16px!important;height:16px!important;fill:none!important;stroke:var(--c-muted,var(--muted))!important;stroke-width:1.6!important}
  .desktop-trash-row strong{font-size:10.5px!important}
  .desktop-trash-row small{font-size:9px!important;color:var(--c-muted,var(--muted))!important}
  .desktop-trash-row b{font-size:17px!important;font-weight:400!important;color:var(--c-muted,var(--muted))!important}
  .app>.sidebar .sidebar-footer{display:none!important}

  /* Topbar: preserve WOL / favorite / focus / more. */
  .app>.workspace{grid-template-rows:60px minmax(0,1fr)!important;background:var(--c-paper,var(--paper))!important}
  .app>.workspace>.topbar{
    height:60px!important;padding:0 14px!important;border-bottom:1px solid var(--c-line,var(--line))!important;
    background:var(--c-paper,var(--paper))!important;backdrop-filter:none!important
  }
  .app>.workspace>.topbar .notes-screen-title{display:none!important}
  .app>.workspace>.topbar .topbar-left{margin-right:auto!important}
  .app>.workspace>.topbar .save-state{
    height:31px!important;border-radius:999px!important;background:var(--c-paper,var(--paper))!important;
    border-color:var(--c-line,var(--line))!important;box-shadow:none!important
  }
  .app>.workspace>.topbar-actions{gap:7px!important}
  .app>.workspace>.topbar-actions>.icon-button,.app>.workspace>.topbar-actions>.wol-book-button{
    width:38px!important;min-width:38px!important;height:38px!important;border-radius:10px!important;
    border:1px solid var(--c-line,var(--line))!important;background:var(--c-paper,var(--paper))!important;
    color:var(--c-ink,var(--text))!important;box-shadow:none!important
  }
  .app>.workspace>.topbar-actions>.icon-button:hover,.app>.workspace>.topbar-actions>.wol-book-button:hover{
    background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important
  }

  /* Open canvas — deliberately no "sheet of paper" card. */
  .app>.workspace>.workspace-scroll{
    min-height:0!important;padding:0!important;background:var(--c-paper,var(--paper))!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) 230px!important;align-items:start!important;
    overflow-y:auto!important;overflow-x:hidden!important
  }
  .workspace-scroll> .empty-workspace:not([hidden]){
    grid-column:1/-1!important;min-height:calc(100dvh - 60px)!important;background:var(--c-paper,var(--paper))!important
  }
  .workspace-scroll> .paper:not([hidden]){
    grid-column:1!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:calc(100dvh - 60px)!important;
    margin:0!important;padding:40px 42px 56px!important;border:0!important;border-radius:0!important;
    background:var(--c-paper,var(--paper))!important;box-shadow:none!important
  }
  .workspace-scroll> .paper:not([hidden])::before,.workspace-scroll> .paper:not([hidden])::after{display:none!important;content:none!important}
  .workspace-scroll> .paper:not([hidden]) .page-heading,
  .workspace-scroll> .paper:not([hidden]) .template-heading,
  .workspace-scroll> .paper:not([hidden]) .toolbar,
  .workspace-scroll> .paper:not([hidden]) .free-editor,
  .workspace-scroll> .paper:not([hidden]) .template-program,
  .workspace-scroll> .paper:not([hidden]) .paper-footer{
    width:100%!important;max-width:900px!important;margin-left:auto!important;margin-right:auto!important
  }
  .page-heading{position:relative!important;padding-right:86px!important;padding-bottom:5px!important}
  .page-title{font-size:39px!important;line-height:1.09!important;font-weight:790!important;letter-spacing:-.045em!important}
  .page-meta{margin:7px 0 8px!important;gap:7px!important;font-size:9.5px!important}
  .page-folder-context{color:var(--c-accent-deep,var(--accent))!important;font-weight:600!important}
  .page-heading-actions{
    position:absolute!important;right:0!important;top:0!important;display:flex!important;gap:7px!important
  }
  .page-heading-actions button{
    width:36px!important;height:36px!important;border:1px solid var(--c-line,var(--line))!important;border-radius:9px!important;
    background:var(--c-paper,var(--paper))!important;color:var(--c-ink,var(--text))!important;display:grid!important;place-items:center!important;padding:0!important
  }
  .page-heading-actions button:hover{background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important}
  .page-heading-actions svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.6!important;stroke-linecap:round!important;stroke-linejoin:round!important}

  .page-tags-inline{margin:5px 0 10px!important}
  .page-tags-inline .notea-tag-chip{
    min-height:29px!important;padding:4px 9px!important;border-radius:8px!important;
    background:var(--c-accent-soft,var(--accent-soft))!important;border-color:color-mix(in srgb,var(--c-accent,var(--accent)) 28%,var(--c-line,var(--line)))!important;
    color:var(--c-accent-deep,var(--accent))!important
  }
  .quill-inspired-toolbar{
    position:relative!important;top:auto!important;margin:3px auto 6px!important;padding:5px 0!important;
    background:var(--c-paper,var(--paper))!important;border-top:0!important;border-bottom:1px solid color-mix(in srgb,var(--c-line,var(--line)) 72%,transparent)!important;
    box-shadow:none!important
  }
  .free-editor{
    max-width:900px!important;min-height:58vh!important;padding:14px 0 60px!important;
    background-color:var(--c-paper,var(--paper))!important;font-size:17px!important;line-height:1.55!important
  }
  .paper-footer{padding-top:11px!important;background:transparent!important}

  /* Context rail */
  .note-context-rail{
    grid-column:2!important;position:sticky!important;top:0!important;align-self:start!important;
    min-height:calc(100dvh - 60px)!important;padding:18px 14px 22px 0!important;
    background:var(--c-paper,var(--paper))!important;display:grid!important;align-content:start!important;gap:12px!important
  }
  .note-context-rail[hidden]{display:none!important}
  .context-section{
    border:1px solid var(--c-line,var(--line))!important;border-radius:12px!important;
    background:var(--c-paper,var(--paper))!important;overflow:visible!important;box-shadow:none!important
  }
  .context-section>header{
    min-height:43px!important;padding:9px 10px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    border-bottom:0!important;background:transparent!important
  }
  .context-section>header>div{display:flex!important;align-items:center!important;gap:7px!important}
  .context-section>header strong{font-size:10.5px!important;color:var(--c-ink,var(--text))!important}
  .context-section>header svg{width:15px!important;height:15px!important;fill:none!important;stroke:var(--c-muted,var(--muted))!important;stroke-width:1.6!important;stroke-linecap:round!important}
  .context-section>header>button{
    width:26px!important;height:26px!important;border:0!important;border-radius:7px!important;background:transparent!important;
    color:var(--c-muted,var(--muted))!important;font-size:18px!important
  }
  .context-section>header>button:hover{background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important}
  .outline-list{display:grid!important;padding:0 9px 12px!important}
  .outline-item{
    position:relative!important;width:100%!important;min-height:31px!important;border:0!important;border-left:2px solid var(--c-line,var(--line))!important;
    background:transparent!important;color:var(--c-muted,var(--muted))!important;padding:5px 7px 5px 11px!important;
    text-align:left!important;font-size:9.5px!important;line-height:1.35!important
  }
  .outline-item.level-2{padding-left:18px!important}
  .outline-item:hover{color:var(--c-ink,var(--text))!important;background:color-mix(in srgb,var(--c-accent-soft,var(--accent-soft)) 48%,transparent)!important}
  .outline-item.is-active{border-left-color:var(--c-accent,var(--accent))!important;color:var(--c-accent-deep,var(--accent))!important;font-weight:650!important}
  .outline-empty,.quick-notes-empty{
    display:block!important;margin:0 10px 12px!important;padding:9px!important;border-radius:8px!important;
    background:var(--c-paper-2,var(--panel))!important;color:var(--c-muted,var(--muted))!important;font-size:9px!important;line-height:1.45!important
  }
  .quick-note-composer{padding:0 9px 10px!important}
  .quick-note-composer[hidden]{display:none!important}
  .quick-note-composer textarea{
    width:100%!important;min-height:84px!important;resize:vertical!important;border:1px solid var(--c-line,var(--line))!important;border-radius:9px!important;
    background:var(--c-paper-2,var(--panel))!important;color:var(--c-ink,var(--text))!important;padding:9px!important;
    font:400 10px/1.45 var(--c-ui,var(--ui))!important;outline:0!important
  }
  .quick-note-composer textarea:focus{border-color:var(--c-accent,var(--accent))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent,var(--accent)) 10%,transparent)!important}
  .quick-note-composer>div{display:flex!important;justify-content:flex-end!important;gap:6px!important;margin-top:6px!important}
  .quick-note-composer button{
    min-height:30px!important;border:1px solid var(--c-line,var(--line))!important;border-radius:8px!important;background:var(--c-paper,var(--paper))!important;
    color:var(--c-ink,var(--text))!important;padding:6px 9px!important;font-size:9px!important;font-weight:650!important
  }
  .quick-note-composer button.primary{color:#fff!important}
  .quick-notes-list{display:grid!important;gap:9px!important;padding:0 9px 11px!important}
  .quick-note-card{
    position:relative!important;margin:0!important;padding:11px!important;border:1px solid color-mix(in srgb,var(--c-gold,var(--accent)) 24%,var(--c-line,var(--line)))!important;
    border-radius:9px!important;background:color-mix(in srgb,var(--c-gold-soft,var(--c-accent-soft)) 72%,var(--c-paper,var(--paper)))!important
  }
  .quick-note-card.tone-1{
    border-color:color-mix(in srgb,var(--c-accent,var(--accent)) 19%,var(--c-line,var(--line)))!important;
    background:color-mix(in srgb,var(--c-accent-soft,var(--accent-soft)) 64%,var(--c-paper,var(--paper)))!important
  }
  .quick-note-card p{margin:0!important;color:var(--c-ink,var(--text))!important;font-size:10px!important;line-height:1.55!important;white-space:pre-wrap!important}
  .quick-note-card footer{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-top:9px!important}
  .quick-note-card footer small{font-size:8px!important;color:var(--c-muted,var(--muted))!important}
  .quick-note-card footer button{
    width:22px!important;height:22px!important;border:0!important;border-radius:6px!important;background:transparent!important;
    color:var(--c-muted,var(--muted))!important;opacity:0!important
  }
  .quick-note-card:hover footer button,.quick-note-card footer button:focus{opacity:1!important}
  .quick-note-card footer button:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)!important;color:var(--danger)!important}

  /* Focus mode keeps the same borderless writing surface and hides context tools. */
  .app.focus-mode>.workspace>.workspace-scroll{display:block!important;padding:0!important;background:var(--c-paper,var(--paper))!important}
  .app.focus-mode .note-context-rail{display:none!important}
  .app.focus-mode [data-paper]:not([hidden]){
    width:100%!important;max-width:none!important;margin:0!important;padding:44px 54px 64px!important;
    border:0!important;border-radius:0!important;background:var(--c-paper,var(--paper))!important;box-shadow:none!important
  }
}

/* Large desktop: slightly more breathing room for the contextual rail. */

@media (min-width:1320px){
  .app>.workspace>.workspace-scroll{grid-template-columns:minmax(0,1fr) 248px!important}
  .note-context-rail{padding-right:18px!important}
}

/* Tablet / compact desktop: preserve the same concept without squeezing the editor. */

@media (min-width:761px) and (max-width:1120px){
  :root{--desktop-nav-w:170px;--desktop-library-w:244px}
  .app>.workspace>.workspace-scroll{grid-template-columns:minmax(0,1fr)!important}
  .workspace-scroll> .paper:not([hidden]){grid-column:1!important;padding:30px 24px 48px!important}
  .workspace-scroll> .paper:not([hidden]) .page-heading,
  .workspace-scroll> .paper:not([hidden]) .template-heading,
  .workspace-scroll> .paper:not([hidden]) .toolbar,
  .workspace-scroll> .paper:not([hidden]) .free-editor,
  .workspace-scroll> .paper:not([hidden]) .template-program,
  .workspace-scroll> .paper:not([hidden]) .paper-footer{max-width:100%!important}
  .page-title{font-size:34px!important}
  .note-context-rail{
    grid-column:1!important;position:static!important;min-height:0!important;width:100%!important;max-width:900px!important;
    margin:0 auto!important;padding:0 24px 28px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important
  }
  .context-section>header{padding-inline:8px!important}
  .outline-item{font-size:8.8px!important}
  .quick-note-card{padding:9px!important}
  .quick-note-card p{font-size:9px!important}
}

/* Very narrow tablet landscape: rail remains available as a compact sticky strip. */

@media (min-width:761px) and (max-width:900px){
  :root{--desktop-nav-w:156px;--desktop-library-w:220px}
  .app>.workspace>.workspace-scroll{grid-template-columns:minmax(0,1fr)!important}
  .workspace-scroll> .paper:not([hidden]){padding:25px 18px 42px!important}
  .page-heading{padding-right:0!important}
  .page-heading-actions{position:static!important;margin-top:8px!important;justify-content:flex-end!important}
  .page-title{font-size:30px!important}
  .note-context-rail{padding:0 18px 24px!important;grid-template-columns:minmax(0,1fr)!important}
  .context-section>header strong{font-size:9.5px!important}
  .outline-item{padding-left:8px!important;font-size:8.2px!important}
  .quick-note-card p{font-size:8.5px!important}
}

/* Dark theme gets no white leakage: every new surface follows the active palette. */

@media (min-width:761px){
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .desktop-library-add{color:#fff!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quick-note-card{
    background:color-mix(in srgb,var(--c-gold-soft) 66%,var(--c-paper))!important
  }
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quick-note-card.tone-1{
    background:color-mix(in srgb,var(--c-accent-soft) 66%,var(--c-paper))!important
  }
}

@media print{
  .note-context-rail,.page-heading-actions,.desktop-create-menu,.library-tag-filter{display:none!important}
}

/* =========================================================
   NOTEA — DESKTOP/TABLET NOTES POLISH
   Restores sticky editing, keeps folder controls discoverable,
   improves quick-note actions and adds an explicit color palette.
   Mobile remains on its existing layout/rules.
   ========================================================= */

@media (min-width:761px){
  /* Formatting tools remain pinned while the document scrolls. */
  .workspace-scroll> .paper:not([hidden]){
    overflow:visible!important;
    align-self:start!important;
  }
  .quill-inspired-toolbar{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:0!important;
    z-index:28!important;
    background:var(--c-paper,var(--paper))!important;
    isolation:isolate!important;
  }

  /* A normal Enter creates a clear paragraph break while wrapped text keeps
     the editor's compact 1.55 line height. */
  .free-editor p,
  .free-editor>div{
    margin-top:0!important;
    margin-bottom:.68em!important;
  }
  .free-editor p:last-child,
  .free-editor>div:last-child{margin-bottom:0!important}

  /* Folder actions must be discoverable without requiring hover. */
  .desktop-folder-action{
    opacity:1!important;
    color:color-mix(in srgb,var(--c-muted,var(--muted)) 88%,var(--c-ink,var(--text)))!important;
  }
  .desktop-folder-head:hover>.desktop-folder-action,
  .desktop-folder-action:hover,
  .desktop-folder-action:focus-visible{
    opacity:1!important;
  }
  .desktop-folder-action:hover,
  .desktop-folder-action:focus-visible{
    background:var(--c-paper-2,var(--panel))!important;
    color:var(--c-accent-deep,var(--accent))!important;
  }

  /* Small color chooser opened from Folder options > Change color. */
  .folder-color-menu-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  .folder-color-menu-trigger b{
    color:var(--c-muted,var(--muted))!important;
    font-size:16px!important;
    font-weight:500!important;
    transition:transform .14s ease!important;
  }
  .folder-color-menu-trigger.is-open b{transform:rotate(90deg)!important}
  .folder-color-mini-popover{
    margin:4px 0 5px!important;
    width:100%!important;box-sizing:border-box!important;overflow:hidden!important;
    padding:7px!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    place-items:center!important;
    gap:4px!important;
    border:1px solid var(--c-line,var(--line))!important;
    border-radius:10px!important;
    background:var(--c-paper-2,var(--panel))!important;
  }
  .folder-color-mini-popover[hidden]{display:none!important}
  .folder-color-mini-popover .folder-color-swatch{
    width:18px!important;
    height:18px!important;
    min-height:18px!important;
    min-width:18px!important;
    padding:0!important;
    border:1px solid color-mix(in srgb,var(--c-line,var(--line)) 88%,transparent)!important;
    border-radius:999px!important;
    background:transparent!important;
    display:grid!important;
    place-items:center!important;
  }
  .folder-color-mini-popover .folder-color-swatch i{
    width:10px!important;
    height:10px!important;
    border-radius:999px!important;
    background:var(--folder-swatch,var(--c-accent,var(--accent)))!important;
  }
  .folder-color-swatch[data-color="blue"]{--folder-swatch:#5d86c9}
  .folder-color-swatch[data-color="purple"]{--folder-swatch:#8d78c4}
  .folder-color-swatch[data-color="rose"]{--folder-swatch:#c56f8a}
  .folder-color-swatch[data-color="green"]{--folder-swatch:#5d9b72}
  .folder-color-swatch[data-color="amber"]{--folder-swatch:#bd8b3f}
  .folder-color-swatch[data-color="teal"]{--folder-swatch:#4d9896}
  .folder-color-mini-popover .folder-color-swatch:hover,
  .folder-color-mini-popover .folder-color-swatch:focus-visible,
  .folder-color-mini-popover .folder-color-swatch.is-active{
    border-color:var(--c-accent-deep,var(--accent))!important;
    box-shadow:0 0 0 2px var(--c-paper,var(--paper)),0 0 0 3px color-mix(in srgb,var(--c-accent,var(--accent)) 42%,transparent)!important;
  }

  /* Quick-note composer: the Save action must stay readable in every theme. */
  .quick-note-composer button.primary{
    background:var(--c-accent,var(--accent))!important;
    border-color:var(--c-accent,var(--accent))!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  .quick-note-composer button.primary:hover,
  .quick-note-composer button.primary:focus-visible{
    background:var(--c-accent-deep,var(--accent))!important;
    border-color:var(--c-accent-deep,var(--accent))!important;
    color:#fff!important;
  }
  .quick-note-card{
    padding:11px 12px!important;
  }
  .quick-note-card p{
    overflow-wrap:anywhere!important;
  }
}

@media (min-width:901px){
  /* Only Share remains beside the title, so reserve space for one action. */
  .page-heading{padding-right:46px!important}
}

/* =========================================================
   NOTEA — EDITOR STABILITY + BREADCRUMB
   Final authoritative editor rhythm. The workspace remains an open theme
   surface (no paper-card effect) on desktop/tablet.
   ========================================================= */

.page-breadcrumb{
  display:flex;align-items:center;gap:6px;min-height:20px;margin:0 0 10px;
  color:var(--c-muted,var(--muted));font:600 10px/1.25 var(--ui,Inter,system-ui,sans-serif);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.page-breadcrumb .breadcrumb-item{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.page-breadcrumb .breadcrumb-item.is-current{color:var(--c-accent-deep,var(--accent));font-weight:700}

.page-breadcrumb .breadcrumb-separator{flex:0 0 auto;color:color-mix(in srgb,var(--c-muted,var(--muted)) 58%,transparent)}

/* Canonical block rhythm: wrapped lines use line-height; Enter creates one
   predictable paragraph gap. Top-level selectors avoid styling nested inline
   formatting wrappers produced by the toolbar. */

.free-editor{line-height:1.62!important}

.free-editor > p,
.free-editor > div{margin:0 0 .62em!important}

.free-editor > p:last-child,
.free-editor > div:last-child{margin-bottom:0!important}

.free-editor > h2{margin:1.05em 0 .42em!important;line-height:1.24!important}

.free-editor > h3{margin:.92em 0 .38em!important;line-height:1.28!important}

.free-editor > blockquote{margin:.9em 0!important}

@media (min-width:761px){
  /* The new Notes workspace is one continuous theme surface, never a sheet. */
  .workspace-scroll> .paper:not([hidden]){
    background:var(--c-paper,var(--paper))!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;
  }
  .page-folder-context{display:none!important}
  .page-heading{padding-top:2px!important}
  .quill-inspired-toolbar{
    position:-webkit-sticky!important;position:sticky!important;top:0!important;z-index:24!important;
    background:var(--c-paper,var(--paper))!important;
  }
}

@media (max-width:760px){
  .page-breadcrumb{display:none!important}
}

/* =========================================================
   NOTEA — COMPACT FOLDERS + LIVE OUTLINE
   Desktop/tablet refinements only. Uses theme variables exclusively.
   ========================================================= */

@media (min-width:761px){
  /* Compact folder hierarchy: keep actions visible without making them noisy. */
  .desktop-library-section-title{min-height:32px!important;padding:4px 4px 2px!important}
  .desktop-library-section-title .desktop-library-add-circle{
    width:23px!important;height:23px!important;border:1px solid color-mix(in srgb,var(--c-line,var(--line)) 88%,transparent)!important;
    border-radius:999px!important;background:transparent!important;color:var(--c-muted,var(--muted))!important;
    display:grid!important;place-items:center!important;padding:0!important
  }
  .desktop-library-section-title .desktop-library-add-circle svg{
    width:13px!important;height:13px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important
  }
  .desktop-library-section-title .desktop-library-add-circle:hover,
  .desktop-library-section-title .desktop-library-add-circle:focus-visible{
    border-color:color-mix(in srgb,var(--c-accent,var(--accent)) 55%,var(--c-line,var(--line)))!important;
    background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important
  }

  .desktop-folder-node.depth-1{margin-left:18px!important}
  .desktop-folder-head{
    min-height:31px!important;
    grid-template-columns:24px minmax(0,1fr) auto 23px 23px!important;
    gap:1px!important;padding:1px 2px!important;border-radius:8px!important
  }
  .desktop-folder-icon{
    width:22px!important;height:22px!important;border-radius:6px!important
  }
  .desktop-folder-icon svg{width:14px!important;height:14px!important}
  .desktop-folder-toggle{gap:4px!important;padding:0 1px!important}
  .desktop-folder-toggle strong{font-size:10px!important;font-weight:650!important}
  .desktop-folder-toggle .folder-chevron{width:11px!important;height:11px!important}
  .desktop-folder-count{
    min-width:14px!important;padding:0 2px!important;text-align:center!important;
    color:color-mix(in srgb,var(--c-muted,var(--muted)) 90%,transparent)!important;font-size:8.25px!important;line-height:1!important
  }
  .desktop-folder-action{
    width:22px!important;height:22px!important;min-width:22px!important;border-radius:999px!important;
    opacity:1!important;letter-spacing:0!important;font-size:0!important;color:color-mix(in srgb,var(--c-muted,var(--muted)) 86%,var(--c-ink,var(--text)))!important
  }
  .desktop-folder-action svg{
    width:13px!important;height:13px!important;display:block!important;fill:none!important;stroke:currentColor!important;
    stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important
  }
  .desktop-folder-action.folder-add-action{
    border:1px solid color-mix(in srgb,var(--c-line,var(--line)) 90%,transparent)!important;background:transparent!important
  }
  .desktop-folder-action.folder-add-action:hover,
  .desktop-folder-action.folder-add-action:focus-visible{
    border-color:color-mix(in srgb,var(--folder-color) 54%,var(--c-line,var(--line)))!important;
    background:var(--folder-soft)!important;color:var(--folder-color)!important
  }
  .desktop-folder-action.folder-more-action{border:0!important;background:transparent!important}
  .desktop-folder-action.folder-more-action .folder-more-dots{
    width:14px!important;height:14px!important;fill:currentColor!important;stroke:none!important
  }
  .desktop-folder-action.folder-more-action:hover,
  .desktop-folder-action.folder-more-action:focus-visible{
    background:color-mix(in srgb,var(--c-accent-soft,var(--accent-soft)) 72%,transparent)!important;
    color:var(--c-accent-deep,var(--accent))!important
  }
  .folder-inline-menu{top:29px!important}

  /* Outline: the currently read section is unmistakable and follows scrolling. */
  .outline-list{
    max-height:min(46vh,430px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    scrollbar-width:thin!important;scrollbar-color:color-mix(in srgb,var(--c-muted,var(--muted)) 28%,transparent) transparent!important
  }
  .outline-item{
    transition:background .14s ease,color .14s ease,border-color .14s ease,font-weight .14s ease!important
  }
  .outline-item.is-active{
    border-left-color:var(--c-accent,var(--accent))!important;
    background:color-mix(in srgb,var(--c-accent-soft,var(--accent-soft)) 58%,transparent)!important;
    color:var(--c-ink,var(--text))!important;font-weight:760!important
  }
  .outline-item.is-active.level-2{
    color:var(--c-accent-deep,var(--accent))!important;font-weight:730!important
  }
}