/* ==========================================================================
Zettelkasten design system — refreshed
Warm, inviting palette inspired by paper notebooks and writing apps.
Narrower layout for comfortable reading on desktop.
========================================================================== */

:root {
  /* Paper & surfaces — warm cream, like quality notebook paper */
  --paper: #faf4eb;
  --surface: #fffcf7;
  --surface-tint: #f5ede4;

  /* Ink — warm dark brown, softer than pure black */
  --ink: #2c2416;
  --ink-soft: #6b5d4e;
  --ink-faint: #a69580;

  /* Borders */
  --border: #e8ddd0;
  --border-strong: #d4c4b0;

  /* Accent — terracotta (warm, creative, inviting to write) */
  --accent: #c76b4a;
  --accent-hover: #b05a3a;
  --accent-bg: #fdf0ea;
  --accent-text: #8a4a30;

  /* Sticky / pinned state — warm amber/gold */
  --sticky: #c9942e;
  --sticky-hover: #b07d1f;
  --sticky-bg: #fdf6e3;
  --sticky-text: #8a6a1a;

  /* Danger — reserved for delete only */
  --danger: #b84a3a;
  --danger-hover: #9a3a2a;
  --danger-bg: #fceeea;
  --danger-text: #8a3020;

  /* Type */
  --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  letter-spacing: 0.01em;
  padding: var(--sp-5);
}

/* Narrower container for comfortable reading on desktop */
.container { max-width: 960px; margin: 0 auto; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; color: var(--ink); }
h1 { font-size: 1.9em; margin-bottom: var(--sp-4); }
h2 { font-size: 1.4em; margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
h3 { font-size: 1.1em; color: var(--ink-soft); margin-top: var(--sp-4); margin-bottom: var(--sp-2); font-weight: 600; }

a { color: var(--accent); }

/* --------------------------------------------------------------------
Buttons — one shared shape, three roles: primary (filled accent),
secondary (outline neutral, the default), danger (outline red,
delete only), sticky (outline gold, pin/unpin only).
-------------------------------------------------------------------- */

.btn,
.btn-random, .btn-export-link, .btn-logout, .btn-import, .btn-export, .btn-secondary,
.back-link, .bookmarklet-link,
.btn-view, .btn-edit, .btn-delete, .btn-save, .btn-cancel, .btn-pin, .btn-unpin,
.btn-create-new,
.search-form button, .search-form a,
.create-form button,
.edit-form button,
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none !important;
  font-size: 0.9em;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  min-height: 36px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover,
.btn-random:hover, .btn-export-link:hover, .btn-logout:hover, .btn-import:hover,
.btn-export:hover, .btn-secondary:hover, .back-link:hover, .bookmarklet-link:hover,
.btn-view:hover, .btn-edit:hover, .btn-cancel:hover,
.search-form a:hover,
.pagination a:hover {
  background: var(--surface-tint);
  border-color: var(--ink-faint);
}

/* Primary — the one filled action per view */
.btn-create-new,
.create-form button[name="create"],
.btn-save,
.btn-import {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-create-new:hover,
.create-form button[name="create"]:hover,
.btn-save:hover,
.btn-import:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-import:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--ink-faint); cursor: not-allowed; }

.search-form button:hover { background: var(--surface-tint); border-color: var(--ink-faint); }

/* Danger — delete only */
.btn-delete {
  color: var(--danger-text);
  border-color: var(--danger);
  background: var(--surface);
}
.btn-delete:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* Sticky / pin state */
.btn-pin, .btn-unpin {
  color: var(--sticky-text);
  border-color: var(--sticky);
  background: var(--surface);
}
.btn-pin:hover, .btn-unpin:hover {
  background: var(--sticky);
  border-color: var(--sticky);
  color: #fff;
}

.btn-create-new { padding: 13px 32px; font-size: 1.05em; }

.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------
Header
-------------------------------------------------------------------- */

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-5);
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.header-section h1 { margin: 0; flex-shrink: 0; }
.header-section h1 a { color: inherit; text-decoration: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-info, .header-actions span { color: var(--ink-faint); font-size: 0.9em; }

/* --------------------------------------------------------------------
Sticky zettel
-------------------------------------------------------------------- */

.sticky-zettel {
  border: 1px solid var(--sticky);
  background: var(--sticky-bg);
  margin-bottom: var(--sp-6);
  position: relative;
}

.sticky-badge {
  background: var(--sticky);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  font-weight: 600;
  font-size: 0.85em;
  border-radius: 0 0 var(--radius) var(--radius);
  display: inline-block;
  margin-bottom: var(--sp-3);
}

/* --------------------------------------------------------------------
Bookmarklet
-------------------------------------------------------------------- */

.bookmarklet-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-6); }
.bookmarklet-section h3 { color: var(--ink); margin-top: 0; }
.bookmarklet-link { background: var(--accent); border-color: var(--accent); color: #fff; margin: var(--sp-2) 0; }
.bookmarklet-link:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.bookmarklet-instructions { margin-top: var(--sp-2); font-size: 0.9em; color: var(--ink-soft); }

.popup-mode { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.popup-mode h2 { margin-top: 0; color: var(--ink); }

/* --------------------------------------------------------------------
Search
-------------------------------------------------------------------- */

.search-form { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); align-items: stretch; }
.search-form input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 1em;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
}
.search-form input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* --------------------------------------------------------------------
Tag cloud
-------------------------------------------------------------------- */

.tag-cloud { background: var(--surface); padding: var(--sp-3); border-radius: var(--radius-lg); margin-bottom: var(--sp-5); border: 1px solid var(--border); }
.tag-cloud strong { color: var(--ink-soft); font-weight: 600; }
.tag-cloud a { display: inline-block; margin: var(--sp-1); padding: 4px 12px; background: var(--accent-bg); color: var(--accent-text); text-decoration: none; border-radius: var(--radius); font-size: 0.9em; }
.tag-cloud a:hover { background: var(--accent); color: #fff; }

.tag-cloud-bottom { margin-top: var(--sp-6); margin-bottom: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-4); }

/* --------------------------------------------------------------------
Create / edit forms
-------------------------------------------------------------------- */

.create-form { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); border: 1px solid var(--border); }
.create-form label,
.edit-form label { display: block; margin-top: var(--sp-3); font-weight: 600; color: var(--ink-soft); font-size: 0.9em; }
.create-form input[type="text"], .create-form textarea,
.edit-form input[type="text"], .edit-form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: var(--sp-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 1em;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
}
.create-form input[type="text"]:focus, .create-form textarea:focus,
.edit-form input[type="text"]:focus, .edit-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.create-form textarea, .edit-form textarea { min-height: 150px; resize: vertical; font-family: var(--font-mono); font-size: 0.92em; }
.create-form button { margin-top: var(--sp-4); padding: 11px 24px; }

.edit-form { background: var(--surface-tint); padding: var(--sp-4); border-radius: var(--radius-lg); margin-top: var(--sp-3); border: 1px solid var(--border-strong); }
.edit-form button { margin-top: var(--sp-3); margin-right: var(--sp-2); }

/* --------------------------------------------------------------------
Zettel card
-------------------------------------------------------------------- */

.zettel {
  background: var(--surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(44, 36, 22, 0.06);
  transition: box-shadow 0.2s ease;
}
.zettel:hover {
  box-shadow: 0 2px 8px rgba(44, 36, 22, 0.1);
}

.zettel-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--sp-3); gap: var(--sp-3); }
.zettel-title { font-family: var(--font-serif); font-size: 1.4em; font-weight: 600; color: var(--ink); margin: 0; }
.zettel-meta { font-size: 0.85em; color: var(--ink-faint); margin-top: var(--sp-1); }
.zettel-meta code { font-family: var(--font-mono); background: var(--surface-tint); padding: 1px 6px; border-radius: 4px; color: var(--ink-soft); }

/* Content area — constrained for comfortable reading */
.zettel-content {
  margin: var(--sp-3) 0;
  color: var(--ink);
  max-width: 720px;
  font-size: 1.05em;
  line-height: 1.8;
}

/* Markdown content styling */
.zettel-content h1 { font-size: 1.7em; margin: var(--sp-4) 0 var(--sp-2); }
.zettel-content h2 { font-size: 1.4em; margin: var(--sp-4) 0 var(--sp-2); }
.zettel-content h3 { font-size: 1.2em; margin: var(--sp-3) 0 var(--sp-1); }
.zettel-content h4 { font-size: 1.05em; margin: var(--sp-3) 0 var(--sp-1); color: var(--ink-soft); }
.zettel-content h5, .zettel-content h6 { font-size: 0.95em; margin: var(--sp-2) 0 var(--sp-1); font-weight: 600; }

.zettel-content p { margin: var(--sp-2) 0; line-height: 1.8; }

.zettel-content blockquote {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--accent);
  background: var(--surface-tint);
  color: var(--ink-soft);
  font-style: italic;
}
.zettel-content blockquote p { margin: var(--sp-1) 0; }

.zettel-content code {
  background: var(--surface-tint);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--ink);
}

.zettel-content pre {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: var(--sp-3) 0;
}
.zettel-content pre code { background: none; color: inherit; padding: 0; }

.zettel-content ul, .zettel-content ol { margin: var(--sp-2) 0 var(--sp-2) 25px; line-height: 1.8; }
.zettel-content li { margin: var(--sp-1) 0; }

.zettel-content hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

.zettel-content table { border-collapse: collapse; width: 100%; margin: var(--sp-3) 0; }
.zettel-content table th, .zettel-content table td { border: 1px solid var(--border); padding: var(--sp-2); text-align: left; }
.zettel-content table th { background: var(--ink); color: var(--paper); font-weight: 600; }
.zettel-content table tr:nth-child(even) { background: var(--surface-tint); }

.zettel-content a { color: var(--accent); text-decoration: none; }
.zettel-content a:hover { text-decoration: underline; }

.zettel-content strong { font-weight: 700; color: var(--ink); }
.zettel-content em { font-style: italic; }

.zettel-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--sp-2) 0; }

.internal-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.internal-link:hover { text-decoration: underline; }
.broken-link { color: var(--danger-text); font-style: italic; }

.zettel-tags { margin: var(--sp-3) 0; }
.zettel-tags span { display: inline-block; margin-right: var(--sp-2); padding: 3px 10px; background: var(--accent-bg); color: var(--accent-text); border-radius: var(--radius); font-size: 0.85em; }

.zettel-links { margin: var(--sp-3) 0; font-size: 0.95em; }
.zettel-links a { color: var(--accent); text-decoration: none; margin-right: var(--sp-3); }
.zettel-links a:hover { text-decoration: underline; }

.related-section { background: var(--surface-tint); padding: var(--sp-3); border-radius: var(--radius); margin-top: var(--sp-4); border: 1px solid var(--border); }
.related-section h4 { color: var(--ink-soft); margin-bottom: var(--sp-2); font-size: 0.95em; font-weight: 600; }
.related-section ul { list-style: none; padding: 0; }
.related-section li { padding: var(--sp-1) 0; }
.related-section a { color: var(--accent); text-decoration: none; }
.related-section a:hover { text-decoration: underline; }

.no-results { background: var(--sticky-bg); border: 1px solid var(--sticky); color: var(--sticky-text); padding: var(--sp-3); border-radius: var(--radius); margin: var(--sp-4) 0; }

/* Zettel actions */
.zettel-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; align-items: center; }
.zettel-actions form { margin: 0; padding: 0; display: inline-flex; flex: 0 0 auto; }

/* Break long links/words gracefully */
a, .zettel-content, .zettel-content p, .zettel-content div, .zettel-content span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.zettel a { word-break: break-word; overflow-wrap: anywhere; }
.zettel-meta code { word-break: break-all; overflow-wrap: break-word; }

/* --------------------------------------------------------------------
Pagination
-------------------------------------------------------------------- */

.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-6) 0; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 36px; padding: 8px 12px; font-weight: 500; }

/* --------------------------------------------------------------------
Modal (create zettel)
-------------------------------------------------------------------- */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(44, 36, 22, 0.55);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  background-color: var(--surface);
  margin: 5% auto;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-close {
  color: var(--ink-faint);
  float: right;
  font-size: 28px;
  font-weight: bold;
  line-height: 20px;
  cursor: pointer;
  transition: color 0.15s;
}
.modal-close:hover, .modal-close:focus { color: var(--danger); }

.modal-content form input,
.modal-content form textarea {
  width: 100%;
  padding: 10px 12px;
  margin: var(--sp-1) 0 var(--sp-3) 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 1em;
  font-family: inherit;
  background: var(--paper);
}
.modal-content form textarea { font-family: var(--font-mono); font-size: 0.92em; }
.modal-content form input:focus, .modal-content form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.modal-content form label { font-weight: 600; color: var(--ink-soft); display: block; margin-top: var(--sp-2); font-size: 0.9em; }
.modal-content form button { min-height: 44px; }

/* ==========================================================================
Auth pages (login.php)
========================================================================== */

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--paper);
}

.login-container {
  max-width: 400px;
  width: 100%;
  background: var(--surface);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.login-container h1 { text-align: center; margin-bottom: var(--sp-1); font-size: 1.9em; }
.login-container h2 { text-align: center; color: var(--ink-faint); font-size: 1em; font-weight: 400; font-family: var(--font-sans); margin-top: 0; margin-bottom: var(--sp-5); }

.login-form input {
  width: 100%;
  padding: 12px 14px;
  margin: var(--sp-2) 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 1em;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
}
.login-form input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.login-form button {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--sp-3);
}
.login-form button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.login-form button:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--ink-faint); cursor: not-allowed; }

.attempt-counter { text-align: center; color: var(--ink-faint); font-size: 0.9em; margin-top: var(--sp-2); }

/* ==========================================================================
Status messages — shared across login / import / export
========================================================================== */

.error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-4); text-align: center; white-space: pre-line; }
.success { background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-4); text-align: center; white-space: pre-line; }
.info { background: var(--surface-tint); color: var(--ink-soft); border: 1px solid var(--border-strong); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-4); text-align: center; }

/* ==========================================================================
Import page
========================================================================== */

.import-container { max-width: 800px; margin: 0 auto; padding: var(--sp-5) 0; }
.import-option { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); margin: var(--sp-4) 0; border: 1px solid var(--border); }
.import-option h3 { margin-top: 0; color: var(--ink); }
.import-option input[type="file"] { margin: var(--sp-3) 0; font-family: inherit; }

.info-box { background: var(--accent-bg); border-left: 3px solid var(--accent); padding: var(--sp-3); margin: var(--sp-4) 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--accent-text); }
.info-box ul { margin: var(--sp-2) 0 0 var(--sp-4); }

.warning-box { background: var(--sticky-bg); border-left: 3px solid var(--sticky); padding: var(--sp-3); margin: var(--sp-4) 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--sticky-text); }

/* ==========================================================================
Export page
========================================================================== */

.export-container { max-width: 900px; margin: 0 auto; padding: var(--sp-5) 0; }
.export-options { background: var(--surface); padding: var(--sp-5); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); border: 1px solid var(--border); }
.export-format { margin: var(--sp-4) 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s; }
.export-format:hover { border-color: var(--accent); }
.export-format h3 { margin-top: 0; color: var(--ink); }
.export-format p { color: var(--ink-soft); margin: var(--sp-2) 0; }

.zettel-list { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.zettel-checkbox { display: flex; align-items: center; padding: var(--sp-2); margin: var(--sp-1) 0; background: var(--surface-tint); border-radius: var(--radius); transition: background 0.15s; }
.zettel-checkbox:hover { background: var(--accent-bg); }
.zettel-checkbox input[type="checkbox"] { margin-right: var(--sp-2); width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.zettel-checkbox label { cursor: pointer; flex: 1; font-weight: 500; }
.zettel-checkbox .zettel-id { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.85em; margin-left: var(--sp-2); }

.selection-controls { margin: var(--sp-4) 0; padding: var(--sp-3); background: var(--surface-tint); border-radius: var(--radius); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.export-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.btn-export.disabled { opacity: 0.5; cursor: not-allowed; }

.stats { margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); background: var(--accent-bg); border-radius: var(--radius); color: var(--accent-text); font-weight: 600; }

/* ==========================================================================
Responsive
========================================================================== */

@media (max-width: 768px) {
  body { padding: var(--sp-3); }

  .header-section { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .header-section h1 { text-align: center; font-size: 1.5em; }
  .header-actions { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .header-actions > * { width: 100%; justify-content: center; text-align: center; }
  .header-actions span { display: block; text-align: center; padding: var(--sp-2); margin: 0 !important; }

  .sticky-badge { font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  .search-form { flex-direction: column; }
  .search-form input, .search-form button, .search-form a { width: 100%; }

  .zettel { padding: var(--sp-3); }
  .zettel-header { flex-direction: column; }
  .zettel-title { font-size: 1.25em; }

  .zettel-actions { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .zettel-actions button, .zettel-actions a, .zettel-actions form { width: 100%; margin: 0; }
  .zettel-actions form button { width: 100%; }
  .zettel-actions .btn, .zettel-actions button, .zettel-actions a { display: flex; width: 100% !important; box-sizing: border-box; }

  .bookmarklet-section { padding: var(--sp-3); }
  .bookmarklet-section h3 { font-size: 1em; }

  .tag-cloud { padding: var(--sp-2); }
  .tag-cloud a { font-size: 0.85em; margin: 3px; padding: 4px 8px; }

  .btn-create-new { padding: var(--sp-3) var(--sp-5); font-size: 1em; }

  .pagination { gap: 5px; }
  .pagination a, .pagination span { padding: 6px 10px; font-size: 0.9em; }

  .modal-content { width: 95%; margin: 10% auto; padding: var(--sp-4); }
  .edit-form { padding: var(--sp-3); }
}

@media (max-width: 480px) {
  body { padding: var(--sp-2); }
  .header-section h1 { font-size: 1.3em; }
  .zettel { padding: var(--sp-3); }
  .zettel-title { font-size: 1.15em; }
  .btn-create-new { padding: var(--sp-2) var(--sp-4); font-size: 0.95em; }
  .sticky-badge { font-size: 0.8em; }
}