/* Nyvera's shared visual language: quiet surfaces, warm violet light, and clear focus. */
:root {
  color-scheme: dark;
  --bg: #100d15;
  --panel: #17131d;
  --panel2: #1d1925;
  --raised: #26212e;
  --line: #302a38;
  --line2: #443a50;
  --text: #f1edf6;
  --muted: #a29aaa;
  --accent: #b49af5;
  --accent2: #8569d7;
  --soft: #2c2440;
  --green: #70c49d;
  --danger: #e78696;
  --shadow: 0 24px 72px #08060d80;
  --shadow-raised: 0 14px 36px #08060d36, inset 0 1px #ffffff0a;
  --font-ui: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
:root.light {
  color-scheme: light;
  --bg: #f4f1f7;
  --panel: #fbf9fd;
  --panel2: #f3eff7;
  --raised: #fff;
  --line: #e4ddea;
  --line2: #d4c9df;
  --text: #292431;
  --muted: #756e7d;
  --accent: #7756c2;
  --accent2: #6848b0;
  --soft: #eee8f8;
  --green: #37835e;
  --danger: #bf4d60;
  --shadow: 0 24px 72px #35244720;
  --shadow-raised: 0 12px 30px #35244710, inset 0 1px #ffffffc4;
}
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  background-image: radial-gradient(ellipse at 54% -28%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%);
}
button, input, select, textarea { font-family: var(--font-ui); }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [contenteditable="true"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 82%, white);
  outline-offset: 3px;
}
::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }

.app-shell { background: var(--bg); }
@media (min-width: 1101px) {
  .app-shell { grid-template-columns: 4rem 15rem minmax(0, 1fr) 13rem; }
}
.app-shell.home-active { grid-template-columns: 4rem 15rem minmax(0, 1fr); }
.app-shell.home-active .context-panel { display: none; }
.app-shell.tasks-active { grid-template-columns: 3.5rem minmax(0, 1fr); }
.app-shell.tasks-active .sidebar, .app-shell.tasks-active .context-panel { display: none; }
.app-shell.tasks-active .workspace { grid-column: 2; }
.rail { border-color: var(--line); background: color-mix(in srgb, var(--bg) 96%, transparent); }
.rail nav { gap: .42rem; }
.rail-button { position: relative; border-radius: .82rem; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.rail-button:hover { transform: translateY(-1px); }
.rail-button.active::before { position: absolute; left: -.57rem; width: 2px; height: 1.15rem; border-radius: 2px; background: var(--accent); content: ""; }
.rail-button.active { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.sidebar { background: color-mix(in srgb, var(--panel) 97%, var(--accent) 3%); }
.sidebar-header { min-height: 3.15rem; }
.sidebar-header strong { font-size: .82rem; letter-spacing: -.01em; }
.sidebar-footer { gap: .62rem; font-size: .64rem; }
.workspace { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, var(--accent) 3%), var(--panel)); }
.topbar { min-height: 3.75rem; border-color: var(--line); padding-inline: clamp(.8rem, 2vw, 1.4rem); }
.breadcrumbs { font-size: .7rem; letter-spacing: .005em; }
.breadcrumbs strong { font-weight: 630; }
.workspace-tools { min-height: 3.25rem; gap: .5rem; border-bottom-color: var(--line); padding-inline: clamp(.75rem, 2vw, 1.4rem); }
.workspace-tool, .workspace-picker select { min-height: 2.25rem; border-radius: .68rem; }
.workspace-pane-bar { min-height: 3.15rem; background: color-mix(in srgb, var(--panel) 92%, var(--bg)); }
.workspace-tab { border-radius: .7rem .7rem 0 0; }
.context-panel { background: color-mix(in srgb, var(--bg) 87%, var(--panel)); }
.context-panel-header { position: sticky; top: -1rem; z-index: 1; background: inherit; padding: .2rem 0 .35rem; }

.document-head { width: min(100%, 58rem); container-type: inline-size; padding: clamp(1.8rem, 6vh, 3.8rem) clamp(1.4rem, 6cqi, 3.6rem) .85rem; }
.workspace-pane .note-title {
  display: block;
  width: 100%;
  min-height: 1.1em;
  overflow: hidden;
  resize: none;
  border: 0;
  border-radius: .28rem;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7.3cqi, 2.8rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.note-title::placeholder { color: color-mix(in srgb, var(--muted) 48%, transparent); }
.document-meta { gap: .8rem; margin-top: .75rem; font-size: .66rem; }
.tag-row { gap: .4rem; }
.tag-pill { transition: background .16s ease, transform .16s ease; }
.tag-pill:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 20%, var(--soft)); }
.format-bar { border-color: color-mix(in srgb, var(--line2) 58%, var(--line)); border-radius: .72rem; background: color-mix(in srgb, var(--panel2) 86%, transparent); }
.format-bar button { border-radius: .48rem; transition: background .15s ease, color .15s ease, transform .15s ease; }
.format-bar button:active { transform: scale(.94); }
.preview-pane { border-color: var(--line); padding-inline: clamp(1.3rem, 4vw, 3.6rem); }
.rich-editor { max-width: 54rem; margin-inline: auto; font-size: 1.02rem; line-height: 1.82; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-family: var(--font-display); letter-spacing: -.025em; }
.markdown-body h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; overflow-wrap: anywhere; }
.markdown-body h2 { font-size: clamp(1.45rem, 3.2vw, 1.8rem); }
.markdown-body p { line-height: 1.82; }
.markdown-body a { text-decoration-thickness: .07em; text-underline-offset: .18em; }
.markdown-body blockquote { border-radius: 0 .7rem .7rem 0; background: color-mix(in srgb, var(--soft) 42%, transparent); padding: .75rem 1rem; }
.markdown-body pre { border-color: var(--line); border-radius: .75rem; }
.graph-stage, .canvas-stage { border-color: var(--line); border-radius: 1.1rem; box-shadow: inset 0 1px #ffffff05; }
.tag-card { border-radius: .9rem; box-shadow: inset 0 1px #ffffff05; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.tag-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: var(--shadow-raised); }
.note-row, .folder-row { transition: color .15s ease, background .15s ease, transform .15s ease; }
.note-row:hover { transform: translateX(2px); }
.new-note, .primary-button, .home-action-primary, .paths-primary-button, .cowork-primary-button {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent2) 22%, transparent), inset 0 1px #ffffff22;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.new-note:active, .primary-button:active, .home-action-primary:active, .paths-primary-button:active { transform: scale(.98); }
.settings-dialog, .auth-dialog, .setup-dialog, .feedback-dialog, .conflict-dialog, .paths-dialog, .cowork-dialog, .prompt-dialog {
  border-color: color-mix(in srgb, var(--line2) 85%, var(--accent) 15%);
  border-radius: 1.05rem;
  box-shadow: var(--shadow);
}
.settings-dialog h2, .auth-dialog h2, .setup-dialog h2, .feedback-dialog h2, .conflict-dialog h2, .paths-dialog h2 {
  font-family: var(--font-display);
  font-weight: 580;
  letter-spacing: -.025em;
}
.settings-grid button, .paths-template-card, .cowork-card { transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.settings-grid button:hover, .paths-template-card:hover, .cowork-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised); }

.home-view {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: clamp(1.2rem, 3vh, 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 3.8vw, 3rem) clamp(1rem, 4vw, 3.5rem) 1.3rem;
  scrollbar-gutter: stable;
}
.home-view[hidden] { display: none !important; }
.tasks-view { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 1.2rem; overflow: auto; overscroll-behavior: contain; padding: clamp(1.2rem, 3.8vw, 3rem) clamp(1rem, 4vw, 3.5rem) 1.5rem; scrollbar-gutter: stable; }
.tasks-view[hidden] { display: none !important; }
.tasks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; width: min(100%, 62rem); border-bottom: 1px solid var(--line); padding-bottom: 1.15rem; }
.tasks-head .eyebrow { color: var(--accent); font-size: .58rem; font-weight: 760; letter-spacing: .12em; }
.tasks-head h1 { margin: .4rem 0 .35rem; font: 620 clamp(2rem, 4vw, 2.8rem)/1.08 var(--font-display); letter-spacing: -.035em; }
.tasks-head p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.tasks-head > button { flex: 0 0 auto; min-height: 2.75rem; }
.tasks-toolbar { display: flex; width: min(100%, 62rem); align-items: center; justify-content: space-between; gap: 1rem; }
.tasks-toolbar > span { color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.tasks-filters { display: flex; flex-wrap: wrap; gap: .28rem; border: 1px solid var(--line); border-radius: .78rem; background: var(--panel); padding: .24rem; }
.tasks-filters button { display: inline-flex; min-height: 2.45rem; align-items: center; justify-content: center; gap: .42rem; border: 1px solid transparent; border-radius: .57rem; background: transparent; padding: .45rem .72rem; color: var(--muted); font-size: .66rem; font-weight: 650; }
.tasks-filters button.active { border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); background: var(--soft); color: var(--text); }
.tasks-filters button span { color: var(--accent); font-size: .61rem; font-variant-numeric: tabular-nums; }
.task-list { display: grid; width: min(100%, 62rem); align-content: start; gap: .45rem; }
.task-view-row { display: flex; min-width: 0; align-items: center; gap: .75rem; border: 1px solid var(--line); border-radius: .82rem; background: color-mix(in srgb, var(--panel) 93%, var(--accent) 7%); padding: .48rem .72rem; transition: border-color .16s ease, background .16s ease; }
.task-view-row:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--panel2); }
.task-view-toggle { position: relative; display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border-radius: .64rem; cursor: pointer; }
.task-view-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.task-view-toggle > span { display: grid; width: 1.28rem; height: 1.28rem; place-items: center; border: 1.5px solid var(--line2); border-radius: .38rem; color: #fff; font-size: .78rem; font-weight: 800; transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.task-view-toggle input:checked + span { transform: scale(.96); border-color: var(--accent2); background: var(--accent2); }
.task-view-toggle input:checked + span::after { content: "✓"; }
.task-view-toggle input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
.task-view-copy { display: grid; min-width: 0; flex: 1; gap: .22rem; }
.task-view-title { width: fit-content; max-width: 100%; overflow: hidden; border: 0; background: transparent; padding: .12rem 0; color: var(--text); font-size: .78rem; font-weight: 650; text-align: left; text-overflow: ellipsis; }
.task-view-title:hover { color: var(--accent); }
.task-view-copy small { overflow-wrap: anywhere; color: var(--muted); font-size: .59rem; line-height: 1.45; }
.task-view-row.is-complete .task-view-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.tasks-empty { display: grid; justify-items: start; gap: .36rem; width: min(100%, 62rem); border: 1px dashed var(--line2); border-radius: .9rem; background: color-mix(in srgb, var(--panel) 86%, transparent); padding: 1.2rem; }
.tasks-empty strong { font: 600 1.12rem/1.3 var(--font-display); }
.tasks-empty > span { color: var(--muted); font-size: .7rem; line-height: 1.6; }
.tasks-empty button { margin-top: .2rem; }
.home-hero { position: relative; display: flex; min-height: 10.5rem; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1.5rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--line)); border-radius: 1.1rem; background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 48%), linear-gradient(115deg, color-mix(in srgb, var(--panel2) 86%, var(--accent) 14%), var(--panel)); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: inset 0 1px #ffffff08; }
.home-hero::after { position: absolute; top: -6.5rem; right: 23%; width: 13rem; height: 13rem; border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 50%; box-shadow: 0 0 0 1.5rem color-mix(in srgb, var(--accent) 2%, transparent), 0 0 0 3rem color-mix(in srgb, var(--accent) 1%, transparent); content: ""; pointer-events: none; }
.home-copy, .home-actions { position: relative; z-index: 1; }
.home-copy { min-width: 0; flex: 1 1 24rem; }
.home-actions { flex: 0 0 auto; }
.home-copy .eyebrow { color: var(--muted); }
.home-copy h1 { margin: .6rem 0 .4rem; font: 600 clamp(1.9rem, 3vw, 2.6rem)/1.04 var(--font-display); letter-spacing: -.045em; }
.home-copy p { max-width: 34rem; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.home-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.home-actions button { display: inline-flex; min-height: 2.65rem; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--line2); border-radius: .7rem; padding: 0 .85rem; font-size: .7rem; font-weight: 700; white-space: nowrap; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.home-actions button:hover { transform: translateY(-1px); }
.home-actions svg { width: 1rem; height: 1rem; }
.home-action-primary { border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; background: var(--accent2); color: #fff; }
.home-action-secondary { background: color-mix(in srgb, var(--panel) 78%, transparent); color: var(--text); }
.home-action-secondary:hover { border-color: var(--accent) !important; background: var(--soft); }
.home-stat-grid { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.home-stat { display: grid; min-width: 0; gap: .18rem; border: 1px solid var(--line); border-radius: .85rem; background: linear-gradient(145deg, color-mix(in srgb, var(--panel2) 88%, var(--accent) 12%), var(--panel)); padding: .9rem 1rem; }
.home-stat > span { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-stat strong { overflow: hidden; color: var(--text); font: 600 clamp(1.55rem, 2.8vw, 2.2rem)/1.12 var(--font-display); font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.home-stat small { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.home-stat-focus { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }
.home-content-grid { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: .75rem; }
.home-card { min-width: 0; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--panel) 91%, var(--panel2)); padding: 1rem; box-shadow: inset 0 1px #ffffff05; }
.home-path-card { grid-row: span 2; }
.home-card-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .65rem; }
.home-card-tools { display: flex; min-width: 0; align-items: center; gap: .25rem; }
.home-card-head .eyebrow { font-size: .5rem; }
.home-card-head h2 { margin: .25rem 0 0; font: 600 1.18rem/1.2 var(--font-display); letter-spacing: -.02em; }
.home-text-button { display: inline-flex; min-height: 2rem; flex: 0 0 auto; align-items: center; gap: .35rem; border: 0; border-radius: .48rem; background: transparent; padding: .25rem .4rem; color: var(--accent); font-size: .62rem; font-weight: 700; white-space: nowrap; }
.home-text-button:hover { background: var(--soft); }
.home-card-count { display: grid; min-width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--soft); color: var(--accent); font-size: .62rem; font-variant-numeric: tabular-nums; }
.home-list { display: grid; gap: .35rem; }
.home-list-row, .home-task-row, .home-path-row { display: flex; width: 100%; min-width: 0; align-items: center; gap: .7rem; border: 1px solid transparent; border-radius: .68rem; background: transparent; padding: .62rem .65rem; color: var(--text); text-align: left; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.home-list-row:hover, .home-task-row:hover, .home-path-row:hover { transform: translateX(2px); border-color: var(--line); background: var(--panel2); }
.home-row-mark { width: .56rem; height: .72rem; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--line)); border-radius: .12rem .25rem .25rem .12rem; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.home-row-copy { display: grid; min-width: 0; flex: 1; gap: .14rem; }
.home-row-copy strong, .home-path-top strong { overflow: hidden; font-size: .69rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.home-row-copy small, .home-path-next { overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.home-row-arrow { color: var(--muted); font-size: .78rem; transition: color .16s ease, transform .16s ease; }
.home-list-row:hover .home-row-arrow { transform: translate(2px,-2px); color: var(--accent); }
.home-task-check { display: grid; width: 1rem; height: 1rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line2); border-radius: .3rem; }
.home-task-row:hover .home-task-check { border-color: var(--accent); }
.home-path-row { display: grid; gap: .42rem; border-color: var(--line); background: linear-gradient(110deg, color-mix(in srgb, var(--soft) 28%, var(--panel)), var(--panel)); padding: .72rem .75rem; }
.home-path-top { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .65rem; }
.home-path-top small { flex: 0 0 auto; color: var(--accent); font-size: .59rem; font-variant-numeric: tabular-nums; }
.home-progress-track { height: .25rem; overflow: hidden; border-radius: 1rem; background: var(--raised); }
.home-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.home-path-next { font-size: .58rem; }
.home-empty { display: grid; justify-items: start; gap: .28rem; border: 1px dashed color-mix(in srgb, var(--line2) 82%, var(--accent) 18%); border-radius: .7rem; background: color-mix(in srgb, var(--panel2) 62%, transparent); padding: .85rem; }
.home-empty strong { font-size: .69rem; font-weight: 680; }
.home-empty > span { max-width: 34rem; color: var(--muted); font-size: .59rem; line-height: 1.55; }
.home-footer { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 1rem; margin-top: auto; border-top: 1px solid var(--line); padding-top: .8rem; color: var(--muted); font-size: .57rem; }
.home-footer span:first-child { color: var(--accent); font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }

.quick-capture-dialog { width: min(calc(100% - 1.25rem), 42rem); max-height: min(85vh, 43rem); max-height: min(85dvh, 43rem); overflow: auto; border: 1px solid var(--line2); border-radius: .95rem; background: var(--panel); padding: 1.1rem; box-shadow: var(--shadow); }
.quick-capture-dialog form { display: grid; gap: .85rem; }
.quick-capture-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.quick-capture-dialog header .eyebrow { color: var(--accent); font-size: .56rem; font-weight: 760; letter-spacing: .12em; }
.quick-capture-dialog h2 { margin: .25rem 0; font: 620 1.55rem/1.15 var(--font-display); }
.quick-capture-dialog p { margin: 0; color: var(--muted); font-size: .75rem; }
.quick-capture-dialog textarea { width: 100%; min-height: 12rem; max-height: 48vh; max-height: 48dvh; resize: vertical; border: 1px solid var(--line); border-radius: .7rem; outline: none; background: var(--bg); padding: .85rem; color: var(--text); font: 400 .85rem/1.6 var(--font-body); }
.quick-capture-dialog textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.quick-capture-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.quick-capture-dialog footer > span { color: var(--muted); font-size: .62rem; }
.quick-capture-dialog footer > div { display: flex; gap: .45rem; }
.note-templates-dialog { width: min(calc(100% - 1.25rem), 48rem); max-height: min(86vh, 46rem); max-height: min(86dvh, 46rem); overflow: auto; border: 1px solid var(--line2); border-radius: 1rem; background: var(--panel); padding: 1.2rem; color: var(--text); box-shadow: var(--shadow); }
.note-templates-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.note-templates-dialog header .eyebrow { color: var(--accent); font-size: .56rem; font-weight: 760; letter-spacing: .12em; }
.note-templates-dialog h2 { margin: .25rem 0 .3rem; font: 620 1.55rem/1.15 var(--font-display); }
.note-templates-dialog header p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.note-template-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.note-template-card { display: grid; min-width: 0; min-height: 7rem; grid-template-columns: 2.55rem minmax(0, 1fr); align-content: start; gap: .75rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel2); padding: .82rem; color: var(--text); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.note-template-card:hover, .note-template-card:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--panel2) 84%, var(--accent) 16%); }
.note-template-mark { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: .68rem; background: color-mix(in srgb, var(--soft) 74%, var(--panel)); color: var(--accent); font-size: .65rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.note-template-copy { display: grid; min-width: 0; gap: .18rem; }
.note-template-copy small { color: var(--accent); font-size: .54rem; font-weight: 730; letter-spacing: .09em; text-transform: uppercase; }
.note-template-copy strong { font-size: .74rem; font-weight: 700; }
.note-template-copy > span:not(.note-template-preview) { color: var(--muted); font-size: .62rem; line-height: 1.5; }
.note-template-copy .note-template-preview { margin-top: .18rem; color: color-mix(in srgb, var(--muted) 78%, var(--accent)); font-size: .55rem; }
.note-template-footnote { margin: .9rem 0 0; color: var(--muted); font-size: .61rem; line-height: 1.55; }
@media (max-width: 520px) {
  .quick-capture-dialog { width: calc(100% - 1rem); padding: .85rem; }
  .quick-capture-dialog textarea { min-height: 9rem; }
  .quick-capture-dialog footer { align-items: flex-start; flex-direction: column; }
  .quick-capture-dialog footer > div { width: 100%; justify-content: flex-end; }
}
@media (max-width: 560px) {
  .note-templates-dialog { width: calc(100% - 1rem); padding: .85rem; }
  .note-template-list { grid-template-columns: minmax(0, 1fr); }
  .note-template-card { min-height: auto; }
}
@media (max-width: 1100px) {
  .quick-capture-dialog textarea { font-size: 16px; }
}

.home-view:not([hidden]) { animation: nyvera-view-in .28s cubic-bezier(.2,.75,.25,1) both; }
.home-stat { animation: nyvera-card-in .34s cubic-bezier(.2,.75,.25,1) both; }
.home-stat:nth-child(2) { animation-delay: 35ms; }
.home-stat:nth-child(3) { animation-delay: 70ms; }
.home-stat:nth-child(4) { animation-delay: 105ms; }
.home-card { animation: nyvera-card-in .38s cubic-bezier(.2,.75,.25,1) both; }
.home-recent-card { animation-delay: 45ms; }
.home-tasks-card { animation-delay: 85ms; }
@media (prefers-reduced-motion: no-preference) {
  .workspace-tools:not([hidden]),
  .workspace-panes:not([hidden]),
  .graph-view:not([hidden]),
  .canvas-view:not([hidden]),
  .tags-view:not([hidden]),
  .tasks-view:not([hidden]),
  .paths-view:not([hidden]) {
    animation: nyvera-view-reveal .2s cubic-bezier(.2,.75,.25,1) both;
  }
}
@keyframes nyvera-view-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes nyvera-view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nyvera-card-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) {
  .app-shell { grid-template-columns: 4.25rem 17rem minmax(0, 1fr) 15rem; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .app-shell { grid-template-columns: 4rem 15rem minmax(0, 1fr); }
  .context-panel { display: none; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .app-shell.home-active { grid-template-columns: 4rem minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .document-head { padding-inline: clamp(1.2rem, 5cqi, 2.6rem); }
  .workspace-pane .note-title { font-size: clamp(1.85rem, 7.3cqi, 2.65rem); }
}
@media (max-width: 760px) {
  .app-shell.home-active { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .app-shell.tasks-active { grid-template-columns: 3.45rem minmax(0, 1fr); }
  .home-view { gap: .9rem; padding: 1rem .85rem max(1rem, env(safe-area-inset-bottom)); }
  .tasks-view { gap: .9rem; padding: 1rem .85rem max(1rem, env(safe-area-inset-bottom)); }
  .tasks-head { align-items: flex-start; flex-direction: column; }
  .tasks-toolbar { align-items: flex-start; flex-direction: column; }
  .tasks-filters { width: 100%; }
  .tasks-filters button { flex: 1; padding-inline: .42rem; }
  .home-hero { min-height: auto; overflow: hidden; flex-direction: column; align-items: stretch; gap: 1rem; border-radius: .9rem; padding: 1.15rem; }
  .home-hero::after { display: none; }
  .home-copy { flex: 0 1 auto; }
  .home-copy h1 { font-size: clamp(1.8rem, 7vw, 2.45rem); }
  .home-copy p { font-size: .72rem; }
  .home-actions { justify-content: flex-start; }
  .home-actions button { min-height: 2.8rem; }
  .home-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .home-stat { padding: .72rem .75rem; }
  .home-stat strong { font-size: 1.65rem; }
  .home-content-grid { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .home-path-card { grid-row: auto; }
  .home-card { border-radius: .8rem; padding: .8rem; }
  .home-footer { font-size: .54rem; }
  .workspace-tools { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .workspace-tools::-webkit-scrollbar { display: none; }
  .workspace-picker, .workspace-tool { flex: 0 0 auto; }
  .workspace-pane .document-head { padding: 1.6rem 1.15rem .8rem; }
  .workspace-pane .note-title { font-size: clamp(1.75rem, 8cqi, 2.5rem); }
  .workspace-pane .preview-pane { padding-inline: 1.25rem; }
}
@media (max-width: 420px) {
  .app-shell.home-active { grid-template-columns: 3.45rem minmax(0, 1fr); }
  .home-view { padding-inline: .65rem; }
  .home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-actions button { min-width: 0; gap: .32rem; padding-inline: .38rem; font-size: .6rem; }
  .home-actions .home-action-secondary svg { display: none; }
  .home-stat small { font-size: .54rem; }
  .home-footer { flex-direction: column; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
