:root {
  color-scheme: light dark;
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #fef7ff;
  --md-sys-color-on-background: #1d1b20;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --md-sys-color-inverse-primary: #d0bcff;
  --md-ref-typeface-brand: 'Roboto', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Roboto', system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd8e4;
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;
  --md-sys-color-background: #141218;
  --md-sys-color-on-background: #e6e0e9;
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-inverse-primary: #6750a4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--md-ref-typeface-plain);
  min-height: 100dvh;
  font-size: 15px;
}

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: local('system-ui');
}

.nx-bar {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nx-bar::after { content: none; }

.nx-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-size: 16px;
}

.nx-logo {
  width: 22px;
  height: 22px;
  fill: var(--md-sys-color-primary);
}

.nx-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px 140px;
}

.nx-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}

.nx-toolbar .nx-search { width: 100%; }

.nx-toolbar #filterTagSet {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.nx-toolbar #newBtn { align-self: center; }

.nx-spacer { display: none; }

.nx-count {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin: 8px 4px 14px;
}

.nx-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.note-card {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  border-radius: 16px;
  padding: 16px 18px;
  border: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.note-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border-color: var(--md-sys-color-primary);
}

.note-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.note-card .preview {
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.note-card .meta {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}

.note-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.note-card .tags md-filter-chip { font-size: 12px; }

.nx-empty {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.nx-empty-card {
  text-align: center;
  max-width: 360px;
  padding: 32px;
  background: var(--md-sys-color-surface-container);
  border-radius: 20px;
}

.nx-empty-card h2 {
  margin: 12px 0 6px;
  color: var(--md-sys-color-on-surface);
}

.nx-empty-card p {
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

#fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  --md-fab-container-color: var(--md-sys-color-primary-container);
  --md-fab-icon-color: var(--md-sys-color-on-primary-container);
  z-index: 5;
}

#editorDialog {
  --md-dialog-container-color: var(--md-sys-color-surface-container-high);
}

.editor-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.editor-head md-filled-text-field { width: 100%; }

.editor-meta {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}

#contentInput { width: 100%; }

.editor-tags {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor-tags md-filled-text-field { width: 100%; }

.danger {
  color: var(--md-sys-color-error);
}

@media (max-width: 600px) {
  .nx-main { padding: 14px 16px 120px; }
  .nx-toolbar { grid-template-columns: 1fr; }
  .nx-toolbar #newBtn { justify-self: start; }
  #fab { right: 16px; bottom: 16px; }
}