/* Note — stile minimale, mobile-first, chiaro/scuro da prefers-color-scheme */

:root {
  color-scheme: light dark;
  --bg: #fafaf9;
  --surface: #ffffff;
  --text: #1c1917;
  --muted: #6b6560;
  --border: #e3e0dc;
  --accent: #2b59c3;
  --accent-text: #ffffff;
  --danger: #b42318;
  --ok-bg: #e8f3ec;
  --ok-text: #1d5a34;
  --err-bg: #fbeaea;
  --err-text: #8a1c14;
  --code-bg: #f1efec;
  --pin: #b7791f;
  --warn-bg: #fdf3e1;
  --warn-text: #7a4b00;
  --tx-red: #c5221f; --tx-orange: #c26401; --tx-green: #137333; --tx-blue: #1a5fd0; --tx-purple: #8430a3;
  --radius: 0.5rem;
  --gap: 1rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1e2023;
    --surface: #353940;
    --text: #eceef1;
    --muted: #a9adb4;
    --border: #50565f;
    --accent: #7aa2f7;
    --accent-text: #0e1220;
    --danger: #f28b82;
    --ok-bg: #16301f;
    --ok-text: #a6dcb8;
    --err-bg: #3a1714;
    --err-text: #f6b8b2;
    --code-bg: #42474f;
    --pin: #e0b15a;
    --warn-bg: #3a2a0f;
    --warn-text: #f3cf8a;
    --tx-red: #ff8a80; --tx-orange: #ffb46b; --tx-green: #81c995; --tx-blue: #8ab4f8; --tx-purple: #d7aefb;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e2023;
  --surface: #353940;
  --text: #eceef1;
  --muted: #a9adb4;
  --border: #50565f;
  --accent: #7aa2f7;
  --accent-text: #0e1220;
  --danger: #f28b82;
  --ok-bg: #16301f;
  --ok-text: #a6dcb8;
  --err-bg: #3a1714;
  --err-text: #f6b8b2;
  --code-bg: #42474f;
  --pin: #e0b15a;
  --warn-bg: #3a2a0f;
  --warn-text: #f3cf8a;
  --tx-red: #ff8a80; --tx-orange: #ffb46b; --tx-green: #81c995; --tx-blue: #8ab4f8; --tx-purple: #d7aefb;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.55 var(--font);
  overflow-wrap: anywhere;
}

.wrap { width: 100%; max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1rem; padding-bottom: 6rem; }

a { color: var(--accent); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.5rem; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
html:not(.js) .js-only { display: none !important; }
html.js .no-js { display: none !important; }

/* ---- Header ---------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 3.25rem; }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.top nav { display: flex; gap: 0.4rem; align-items: center; }
form.inline { display: inline; margin: 0; }

/* ---- Pulsanti e campi ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.95rem; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

input, textarea, select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 1rem; /* ≥ 16px: niente zoom automatico su mobile */
}
input[type="checkbox"] { width: auto; }
label { display: block; font-weight: 500; }
label input, label textarea { margin-top: 0.3rem; font-weight: 400; }
label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin: 0.75rem 0; }
.stack { display: grid; gap: var(--gap); margin: 1rem 0; }
.code { font-family: var(--mono); font-size: 1.4rem; letter-spacing: 0.2em; text-align: center; }

/* ---- Messaggi --------------------------------------------------------- */
.flash { padding: 0.7rem 0.9rem; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-text); margin: 0 0 1rem; }
.flash.error { background: var(--err-bg); color: var(--err-text); }
.empty { color: var(--muted); text-align: center; padding: 3rem 0; }

/* ---- Accesso ---------------------------------------------------------- */
.auth { max-width: 24rem; margin: 2rem auto; }
.qr { background: #fff; padding: 0.5rem; border-radius: var(--radius); max-width: 16rem; margin: 1rem auto; }
.qr svg { display: block; width: 100%; height: auto; }
.secret code { font-size: 1.05rem; word-spacing: 0.3em; }
.steps { padding-left: 1.25rem; }
.codes { font-family: var(--mono); font-size: 1.1rem; columns: 2; padding-left: 1.75rem; }
details { margin: 1rem 0; }
summary { cursor: pointer; }

/* ---- Lista ------------------------------------------------------------ */
.search { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.search input { flex: 1; min-width: 0; }
.search select { width: auto; flex: 0 0 auto; }
html.js .search .btn { display: none; }

.tags { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 0.75rem; scrollbar-width: thin; }
.tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); background: var(--surface); text-decoration: none; font-size: 0.9rem; white-space: nowrap;
}
.tag.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tag .n { color: var(--muted); font-size: 0.8rem; }
.tag.active .n { color: inherit; opacity: 0.8; }
.tag.small { padding: 0 0.5rem; font-size: 0.8rem; }

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.note-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.note-card.pinned { border-left: 0.25rem solid var(--pin); }
.note-link { display: block; padding: 0.7rem 0.9rem 0.1rem; color: inherit; text-decoration: none; }
.note-title { display: block; font-weight: 600; }
.note-preview { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 0.15rem; }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.82rem; padding: 0.25rem 0.9rem 0.7rem; }
.note-view .note-meta { padding: 0 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.pin { font-size: 0.85em; }

/* ---- Azioni ----------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.actions.sticky {
  position: sticky; bottom: 0; margin: 1rem -1rem 0; padding: 0.75rem 1rem;
  background: var(--bg); border-top: 1px solid var(--border);
}

/* ---- Editor ----------------------------------------------------------- */
.editor { display: grid; gap: 0.75rem; }
.title-input { font-size: 1.25rem; font-weight: 600; }
.body-input { min-height: 55vh; resize: vertical; font-family: var(--mono); font-size: 0.95rem; line-height: 1.5; tab-size: 4; }
.preview { padding: 0.75rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); }
.js .body-input[hidden] { display: none; }
.toolbar {
  display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center;
  position: sticky; top: calc(3.25rem + 1px); z-index: 5; padding: 0.35rem 0; background: var(--bg);
}
.toolbar button {
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.4rem; font: inherit; font-size: 1rem; line-height: 1;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  touch-action: manipulation;
}
.toolbar button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.toolbar .sep { width: 1px; height: 1.6rem; background: var(--border); margin: 0 0.15rem; }
.rich {
  min-height: 55vh; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); line-height: 1.55; overflow-wrap: anywhere; outline: none; cursor: text;
}
.rich:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.tags-field { position: relative; }
.suggest { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.suggest button { font: inherit; font-size: 0.85rem; cursor: pointer; }

@media (min-width: 64rem) {
  .wrap { max-width: 56rem; }
}

/* ---- Markdown --------------------------------------------------------- */
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { line-height: 1.3; margin: 1.4em 0 0.5em; }
.md h1 { font-size: 1.4rem; } .md h2 { font-size: 1.25rem; } .md h3 { font-size: 1.1rem; }
.md h4, .md h5, .md h6 { font-size: 1rem; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .table-wrap { margin: 0 0 0.9em; }
.md ul, .md ol { padding-left: 1.4rem; }
.md ul.checklist { list-style: none; padding-left: 1.9rem; }
.md ul.checklist > li { position: relative; }
.md ul.checklist > li::before {
  content: ""; position: absolute; left: -1.7rem; top: 0.2em; width: 1.05em; height: 1.05em;
  border: 2px solid var(--muted); border-radius: 0.25rem; box-sizing: border-box;
}
.md ul.checklist > li.checked { color: var(--muted); text-decoration: line-through; }
.md ul.checklist > li.checked::before { content: "✓"; background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  font-size: 0.8em; line-height: 1.05; text-align: center; font-weight: 700; text-decoration: none; }
.rich ul.checklist > li::before { cursor: pointer; }
.md li > ul, .md li > ol { margin: 0.2em 0; }
.md code { font-family: var(--mono); font-size: 0.9em; background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 0.25rem; }
.md pre { background: var(--code-bg); padding: 0.75rem; border-radius: var(--radius); overflow-x: auto; }
.md pre code { background: none; padding: 0; overflow-wrap: normal; white-space: pre; }
.md blockquote { border-left: 0.25rem solid var(--border); padding-left: 0.9rem; color: var(--muted); margin-left: 0; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.md .table-wrap { overflow-x: auto; }
.md table { border-collapse: collapse; min-width: 50%; }
.md th, .md td { border: 1px solid var(--border); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
.md th { background: var(--code-bg); }

/* ---- Impostazioni ----------------------------------------------------- */
.page-head h1 { margin-bottom: 0.15rem; }
.page-head p { margin: 0 0 1.25rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.stat {
  display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.8rem 0.9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none;
}
a.stat:hover { border-color: var(--muted); }
.stat .num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat .num.small { font-size: 1.05rem; }
.stat .lbl { color: var(--muted); font-size: 0.85rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 1rem; margin: 0 0 1rem; }
.card > h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0.75rem 0 0.25rem; }
.ico { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status { list-style: none; margin: 0; padding: 0; }
.status li, .action summary { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.8rem 0; }
.status li + li, .action + .action { border-top: 1px solid var(--border); }
.status li > div, .action summary > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.status span, .action summary span { color: var(--muted); font-size: 0.9rem; }
.status .ico, .action .ico { margin-top: 0.1rem; }
.badge { flex: none; font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; margin-top: 0.15rem; }
.status .badge.ok { background: var(--ok-bg); color: var(--ok-text); }
.status .badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.status .badge.err { background: var(--err-bg); color: var(--err-text); }
.status .badge.neutral { background: var(--code-bg); color: var(--muted); }
details.action { margin: 0; }
.action summary { list-style: none; cursor: pointer; }
.action summary::-webkit-details-marker { display: none; }
.action summary::after { content: "›"; color: var(--muted); font-size: 1.4rem; line-height: 1; transition: transform 0.15s; }
.action[open] summary::after { transform: rotate(90deg); }
.action summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.25rem; }
.action-body { padding: 0 0 1rem 2.2rem; }
.action-body form { margin: 0.75rem 0 0; }
.notice { background: var(--warn-bg); color: var(--warn-text); padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.92rem; margin: 0 0 0.75rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 30rem) {
  .action-body { padding-left: 0; }
  .stat { padding: 0.65rem 0.7rem; }
  .stat .num { font-size: 1.35rem; }
}

/* ---- Menu (tre linee) -------------------------------------------------- */
.menu { position: relative; margin: 0; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.icon-btn { padding: 0.4rem 0.55rem; }
.burger { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu[open] > summary { background: var(--code-bg); border-color: var(--muted); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; min-width: 14rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem;
  box-shadow: 0 10px 28px rgba(20, 20, 30, 0.18); padding: 0.35rem; animation: menu-in 0.12s ease-out;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-panel { box-shadow: 0 0 0 1px var(--border), 0 10px 28px rgba(0, 0, 0, 0.6); } }
:root[data-theme="dark"] .menu-panel { box-shadow: 0 0 0 1px var(--border), 0 10px 28px rgba(0, 0, 0, 0.6); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem 0.45rem; color: var(--muted); font-size: 0.9rem; }
.menu-panel hr { border: 0; border-top: 1px solid var(--border); margin: 0.3rem 0; }
.menu-panel form { margin: 0; }
.menu-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem 0.7rem;
  background: none; border: 0; border-radius: 0.5rem; color: var(--text); font: inherit; font-size: 0.97rem;
  text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--code-bg); outline: none; }
.menu-item.danger, .menu-item.danger .ico { color: var(--danger); stroke: var(--danger); }
.menu-item .ico, .menu-head .ico { width: 1.2rem; height: 1.2rem; stroke: var(--muted); }

/* ---- Pulsante "nuova nota" ------------------------------------------- */
.fab {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 15; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text); text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.12s;
}
.fab:hover { transform: scale(1.06); }
.fab:active { transform: scale(0.96); }
.fab svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Colori delle note --------------------------------------------------- */
.c-red { --note-bg: #fde2e1; --note-bd: #f0b3b1; }
.c-orange { --note-bg: #fde8d4; --note-bd: #f2c49d; }
.c-yellow { --note-bg: #fdf3c4; --note-bd: #ead88a; }
.c-green { --note-bg: #dcf3e3; --note-bd: #a8dcb9; }
.c-teal { --note-bg: #d5f2ee; --note-bd: #9fdcd3; }
.c-blue { --note-bg: #d8eefb; --note-bd: #a9d6f5; }
.c-purple { --note-bg: #ece4fb; --note-bd: #cdbbf0; }
.c-gray { --note-bg: #ecebe9; --note-bd: #cfccc7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-red { --note-bg: #4a2b2d; --note-bd: #7a4448; }
  :root:not([data-theme="light"]) .c-orange { --note-bg: #4a3424; --note-bd: #80593a; }
  :root:not([data-theme="light"]) .c-yellow { --note-bg: #45401f; --note-bd: #7a6c30; }
  :root:not([data-theme="light"]) .c-green { --note-bg: #22402e; --note-bd: #3d6e4f; }
  :root:not([data-theme="light"]) .c-teal { --note-bg: #1e413e; --note-bd: #356e68; }
  :root:not([data-theme="light"]) .c-blue { --note-bg: #203c53; --note-bd: #386386; }
  :root:not([data-theme="light"]) .c-purple { --note-bg: #3a2f53; --note-bd: #5f4e86; }
  :root:not([data-theme="light"]) .c-gray { --note-bg: #3a3d42; --note-bd: #5a5f66; }
}
:root[data-theme="dark"] .c-red { --note-bg: #4a2b2d; --note-bd: #7a4448; }
:root[data-theme="dark"] .c-orange { --note-bg: #4a3424; --note-bd: #80593a; }
:root[data-theme="dark"] .c-yellow { --note-bg: #45401f; --note-bd: #7a6c30; }
:root[data-theme="dark"] .c-green { --note-bg: #22402e; --note-bd: #3d6e4f; }
:root[data-theme="dark"] .c-teal { --note-bg: #1e413e; --note-bd: #356e68; }
:root[data-theme="dark"] .c-blue { --note-bg: #203c53; --note-bd: #386386; }
:root[data-theme="dark"] .c-purple { --note-bg: #3a2f53; --note-bd: #5f4e86; }
:root[data-theme="dark"] .c-gray { --note-bg: #3a3d42; --note-bd: #5a5f66; }
/* Tag colorati: tinta leggera + bordo; il tag attivo nei filtri resta in blu pieno */
.tag[class*=" c-"] { background: var(--note-bg); border-color: var(--note-bd); color: var(--text); }
.tag[class*=" c-"].active { background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  box-shadow: inset 0 0 0 2px var(--note-bd); }
.dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--note-bd, var(--border)); flex: none; }
.tag-list { list-style: none; margin: 0; padding: 0; }
.tag-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 0; scroll-margin-top: 4rem; }
.tag-list li + li { border-top: 1px solid var(--border); }
.tag-info { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.tag-info .muted { font-size: 0.85rem; }
.tag-list .color-pick { margin: 0; gap: 0.35rem; }
.tag-list .swatch { width: 1.9rem; height: 1.9rem; }

.color-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 1rem 0; padding: 0; border: 0; }
.color-pick legend { font-weight: 500; margin-bottom: 0.4rem; padding: 0; }
.swatch {
  position: relative; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--note-bg, var(--surface)); border: 2px solid var(--note-bd, var(--border));
}
.swatch.none { background: linear-gradient(135deg, transparent 46%, var(--muted) 46%, var(--muted) 54%, transparent 54%), var(--surface); }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch.on, .swatch:has(input:checked) { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Lista: strumenti, gruppi, ricerca, trascinamento -------------------- */
.list-tools { margin-bottom: 0.75rem; }
.list-tools .search { margin-bottom: 0.5rem; }
.view-opts { display: flex; gap: 0.5rem; }
.view-opts label { flex: 1; min-width: 0; }
.view-opts select { padding: 0.45rem 0.6rem; font-size: 0.92rem; }
.group-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 1.25rem 0 0.5rem; }
.group-title .n { font-weight: 400; }
.note-group:first-of-type .group-title { margin-top: 0.25rem; }
.result-count, .hint { font-size: 0.88rem; margin: 0 0 0.6rem; }
.archive-link { text-align: center; margin: 1.5rem 0 0; font-size: 0.92rem; }
.notice-archived { background: var(--code-bg); color: var(--muted); }
mark { background: color-mix(in srgb, #f5c518 55%, transparent); color: inherit; border-radius: 0.15rem; padding: 0 0.1em; }
.note-card { position: relative; }
.js-sortable .note-card .note-link, .js-sortable .note-card .note-meta { padding-right: 3rem; }
.drag-handle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted); font-size: 1.3rem; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.note-card.dragging { z-index: 5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); opacity: 0.95; transform: scale(1.02); }
.note-card.dragging .drag-handle { cursor: grabbing; }
body.is-dragging { user-select: none; -webkit-user-select: none; }

/* ---- Barra della nota (icone) ----------------------------------------- */
.note-bar {
  position: sticky; top: calc(3.25rem + 1px); z-index: 9; display: flex; align-items: center; justify-content: space-between;
  margin: -0.5rem -0.5rem 0.75rem; padding: 0.3rem 0.25rem; background: var(--bg);
}
.bar-actions { display: flex; align-items: center; gap: 0.15rem; }
.bar-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; list-style: none;
  transition: background 0.12s;
}
.bar-btn:hover, .menu[open] > summary.bar-btn { background: var(--code-bg); border: 0; }
.bar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bar-btn .ico { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bar-btn .ico.dots { fill: currentColor; stroke: none; }
.bar-btn.on { color: var(--accent); }
.bar-btn.on .ico { fill: currentColor; fill-opacity: 0.25; }
.note-bar .menu-panel { min-width: 11rem; }
.menu-item .ico { fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.badge-pin { font-size: 0.75rem; font-weight: 600; padding: 0 0.5rem; border-radius: 999px; background: var(--code-bg); color: var(--text); }
.note-view { padding-bottom: 2rem; }

/* ---- Modulo email ----------------------------------------------------- */
.form-stack { display: grid; gap: 0.9rem; padding: 1rem; }
.form-stack .actions { margin-top: 0.25rem; }
.small { font-size: 0.85rem; }

/* ---- Colore del testo -------------------------------------------------- */
.tx-red, .rich font[color="#d93025"] { color: var(--tx-red); }
.tx-orange, .rich font[color="#e8710a"] { color: var(--tx-orange); }
.tx-green, .rich font[color="#188038"] { color: var(--tx-green); }
.tx-blue, .rich font[color="#1a73e8"] { color: var(--tx-blue); }
.tx-purple, .rich font[color="#8e24aa"] { color: var(--tx-purple); }
.rich font[color="#000001"] { color: inherit; }
.toolbar .color-btn { position: relative; font-weight: 700; }
.color-bar {
  position: absolute; left: 22%; right: 22%; bottom: 0.35rem; height: 0.2rem; border-radius: 1px;
  background: linear-gradient(90deg, var(--tx-red), var(--tx-orange), var(--tx-green), var(--tx-blue), var(--tx-purple));
}
.color-row { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.2rem; }
.color-row[hidden] { display: none; }
/* Pallini come quelli dei tag; l'ultimo (colore del testo normale) toglie il colore */
.toolbar .swatch-txt {
  min-width: 0; width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%; border: 2px solid transparent;
  font-size: 0; color: transparent; margin: 0 0.1rem;
}
.toolbar .swatch-txt.tx-red { background: var(--tx-red); }
.toolbar .swatch-txt.tx-orange { background: var(--tx-orange); }
.toolbar .swatch-txt.tx-green { background: var(--tx-green); }
.toolbar .swatch-txt.tx-blue { background: var(--tx-blue); }
.toolbar .swatch-txt.tx-purple { background: var(--tx-purple); }
.toolbar .swatch-txt.none { background: var(--text); }
.toolbar .swatch-txt:hover, .toolbar .swatch-txt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-row { align-items: center; gap: 0.45rem; }

/* ---- Dispositivi ricordati ------------------------------------------- */
.device-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.device-list li > div { display: grid; gap: 0.1rem; min-width: 0; }
.device-list form { margin: 0; }
.device-list .badge.ok { background: var(--ok-bg); color: var(--ok-text); }