/*
Theme Name: Online Notepad
Theme URI: https://example.com
Author: Online Notepad
Author URI: https://example.com
Description: A powerful online notepad WordPress theme with rich text editor, auto-save, dark mode, password-protected notes, pin, search, export/import, and an integrated blog. All notes stored locally in the browser for maximum privacy.
Version: 2.8
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: online-notepad
Tags: one-column, custom-colors, custom-menu, featured-images, blog
*/

/* Performance: Use will-change for animations */
.blog-card,
.note-item,
.tool-btn {
  will-change: transform;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg-main: #0f172a;
  --bg-sidebar: #111827;
  --bg-card: #1f2937;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #0f172a;
  --primary-foreground: #f8fafc;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #eef2ff;
  --accent-foreground: #312e81;
  --destructive: #ef4444;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #818cf8;
  /* ─── Premium Spectrum Gradient ────────────────────────────
     Green→Cyan→Blue (top) / Blue→Purple→Pink→Red→Orange→Yellow (bottom)
     ────────────────────────────────────────────────────────── */
  --gradient-spectrum: linear-gradient(135deg,
    #22c55e 0%, #06b6d4 18%, #3b82f6 35%,
    #6366f1 50%, #a855f7 62%, #ec4899 74%,
    #ef4444 84%, #f97316 92%, #eab308 100%
  );
  --gradient-spectrum-soft: linear-gradient(135deg,
    rgba(34,197,94,0.15) 0%, rgba(6,182,212,0.15) 18%, rgba(59,130,246,0.15) 35%,
    rgba(99,102,241,0.15) 50%, rgba(168,85,247,0.15) 62%, rgba(236,72,153,0.15) 74%,
    rgba(239,68,68,0.15) 84%, rgba(249,115,22,0.15) 92%, rgba(234,179,8,0.15) 100%
  );
  --gradient-logo-text: linear-gradient(135deg, #22c55e 0%, #06b6d4 20%, #3b82f6 40%, #a855f7 60%, #ec4899 80%, #f97316 100%);
  /* ─── Brand palette (Indigo + Cyan) ─────────────────────────────
     The legacy --amber-* / --orange-* names are kept as aliases so the
     entire theme picks up the new color without rewriting templates.
     To rebrand again, only touch the --brand-* values below.
     ───────────────────────────────────────────────────────────── */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;
  --brand-accent-400: #22d3ee;
  --brand-accent-500: #06b6d4;
  --brand-accent-600: #0891b2;
  /* Aliases so existing CSS keeps working */
  --amber-50:  var(--brand-50);
  --amber-100: var(--brand-100);
  --amber-200: var(--brand-200);
  --amber-300: var(--brand-300);
  --amber-400: var(--brand-400);
  --amber-500: var(--brand-500);
  --amber-600: var(--brand-600);
  --amber-700: var(--brand-700);
  --amber-900: var(--brand-900);
  --orange-500: var(--brand-accent-500);
  --orange-600: var(--brand-accent-600);
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

[data-theme="dark"] {
  --background: #0b1020;
  --foreground: #e2e8f0;
  --card: #111827;
  --card-foreground: #e2e8f0;
  --popover: #111827;
  --popover-foreground: #e2e8f0;
  --primary: #e2e8f0;
  --primary-foreground: #0b1020;
  --secondary: #0f172a;
  --secondary-foreground: #e2e8f0;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #1e293b;
  --accent-foreground: #c7d2fe;
  --destructive: #f87171;
  --border: rgba(148, 163, 184, 0.16);
  --input: rgba(148, 163, 184, 0.22);
  --ring: var(--brand-400);
  --amber-400: var(--brand-300);
  --color-scheme: dark;
}

html {
  transition: color-scheme 0.3s;
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--border);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.5;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

::selection {
  background: var(--brand-200);
  color: var(--brand-900);
}
[data-theme="dark"] ::selection {
  background: var(--brand-700);
  color: #f8fafc;
}

a { color: var(--amber-600); text-decoration: none; }
[data-theme="dark"] a { color: var(--amber-400); }

/* ═══════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════ */
#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--background);
  contain: layout paint;
}

#app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */
#navbar {
  display: flex;
  align-items: center;
  height: 44px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--background);
  padding: 0 8px;
  user-select: none;
  gap: 6px;
}

#navbar .logo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}

#navbar .logo-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--gradient-spectrum);
  color: white;
  position: relative;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25), 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 0 rgba(255,255,255,0.25) inset;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  overflow: hidden;
}
#navbar .logo-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  pointer-events: none;
}
#navbar .logo-icon:hover {
  box-shadow: 0 4px 16px rgba(99,102,241,0.35), 0 0 0 1px rgba(255,255,255,0.2) inset, 0 1px 0 rgba(255,255,255,0.3) inset;
  transform: translateY(-0.5px);
}
#navbar .logo-icon svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12)); }
[data-theme="dark"] #navbar .logo-icon { box-shadow: 0 2px 12px rgba(99,102,241,0.3), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 1px 0 rgba(255,255,255,0.12) inset; }
[data-theme="dark"] #navbar .logo-icon:hover { box-shadow: 0 4px 20px rgba(139,92,246,0.35), 0 0 0 1px rgba(255,255,255,0.12) inset, 0 1px 0 rgba(255,255,255,0.18) inset; }

#navbar .logo-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--gradient-logo-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] #navbar .logo-text {
  background: linear-gradient(135deg, #4ade80 0%, #22d3ee 20%, #60a5fa 40%, #c084fc 60%, #f472b6 80%, #fb923c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#navbar .nav-center {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
}

#navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   TAB BAR
   ═══════════════════════════════════════════════════════════════ */
#tab-bar {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(245, 245, 245, 0.2);
  padding: 0 8px;
}
[data-theme="dark"] #tab-bar {
  background: rgba(38, 38, 38, 0.2);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--foreground); background: var(--accent); border-radius: 6px 6px 0 0; }
.tab-btn.active {
  border-bottom-color: transparent;
  background: var(--gradient-spectrum-soft);
  color: #6366f1;
  position: relative;
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--gradient-spectrum);
  border-radius: 1px;
}
[data-theme="dark"] .tab-btn.active { color: var(--amber-400); }
.tab-btn svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-ghost {
  background: transparent;
  color: var(--foreground);
  padding: 4px;
  border-radius: var(--radius);
}
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15); transition: all 0.2s ease; }

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 4px;
}
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon.sm { width: 24px; height: 24px; }
.btn-icon.sm svg { width: 12px; height: 12px; }
.btn-icon.lg { width: 44px; height: 44px; border-radius: 50%; }
.btn-icon.lg svg { width: 20px; height: 20px; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
  padding: 6px 12px;
  height: 32px;
}
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15); transition: all 0.2s ease; }

.btn-primary {
  background: var(--gradient-spectrum);
  color: white;
  padding: 4px 12px;
  height: 32px;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.btn-destructive {
  background: var(--destructive);
  color: white;
  padding: 6px 16px;
  height: 32px;
}
.btn-destructive:hover { opacity: 0.9; }

.btn-sm { height: 28px; font-size: 12px; padding: 4px 10px; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════ */
.input {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  color: var(--foreground);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(163, 163, 163, 0.15);
}
.input::placeholder { color: var(--muted-foreground); opacity: 0.5; }
.input-sm { height: 28px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   ADS & SEO
   ═══════════════════════════════════════════════════════════════ */
.top-ad {
  width: 100%;
  max-width: 970px;
  margin: 10px auto;
  text-align: center;
  min-height: 90px;
}

.seo-content {
  padding: 32px 24px;
  max-width: 768px;
  margin: 0 auto;
  background: var(--background);
  color: var(--foreground);
  border-top: 1px solid var(--border);
}
.seo-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 20px;
  color: var(--amber-600);
}
.seo-content p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.seo-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
#sidebar {
  display: flex;
  flex-direction: column;
  width: 288px;
  height: 100%;
  border-right: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-right 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  transform: translateX(0);
  will-change: width, transform;
}
[data-theme="dark"] #sidebar {
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
}
#sidebar.collapsed {
  width: 0;
  border-right-color: transparent;
  transform: translateX(-100%);
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar-header h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.search-wrapper {
  position: relative;
}
.search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.search-wrapper .search-icon svg { width: 14px; height: 14px; }
.search-wrapper .input { padding-left: 32px; padding-right: 28px; }
.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 2px;
}
.search-clear:hover { color: var(--foreground); }
.search-clear svg { width: 12px; height: 12px; }

/* ─── Notes List ──────────────────────────────────────────── */
.notes-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.notes-list::-webkit-scrollbar { width: 4px; }
.notes-list::-webkit-scrollbar-track { background: transparent; }
.notes-list::-webkit-scrollbar-thumb { 
  background: rgba(0,0,0,0.15); 
  border-radius: 4px;
  transition: background 0.2s;
}
.notes-list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
[data-theme="dark"] .notes-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
[data-theme="dark"] .notes-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

.notes-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
}

/* ─── Note Item - Improved UI ───────────────────────────────────────────── */
.note-item {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  content-visibility: auto;
  contain-intrinsic-size: 0 72px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.note-item:hover {
  background: var(--accent);
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateX(2px);
}
.note-item.active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}
[data-theme="dark"] .note-item.active {
  border-color: rgba(129, 140, 248, 0.2);
  background: rgba(129, 140, 248, 0.05);
}

.note-item-inner {
  padding: 10px 12px;
}
.note-item.compact .note-item-inner { padding: 7px 12px; }

.note-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.note-title {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
}
.note-title.empty {
  color: var(--muted-foreground);
  font-style: italic;
}
.note-item.active .note-title { color: var(--amber-700); }
[data-theme="dark"] .note-item.active .note-title { color: var(--amber-300); }

.note-badges {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.note-item:hover .note-badges { opacity: 1; }
.note-badges svg { width: 12px; height: 12px; color: var(--amber-500); }

.note-preview {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}

.note-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.note-date {
  font-size: 10px;
  color: rgba(115, 115, 115, 0.6);
}
[data-theme="dark"] .note-date { color: rgba(163, 163, 163, 0.6); }

.note-actions {
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.note-item:hover .note-actions { opacity: 1; }
.note-action-btn {
  padding: 2px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: background 0.15s;
}
.note-action-btn:hover { background: var(--accent); color: var(--accent-foreground); transform: scale(1.1); transition: all 0.15s ease; }
.note-action-btn svg { width: 12px; height: 12px; }
.note-action-btn.delete:hover { background: rgba(239, 68, 68, 0.1); color: var(--destructive); }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px;
  text-align: center;
}
.sidebar-footer p {
  font-size: 10px;
  color: var(--muted-foreground);
  opacity: 0.6;
}

.sidebar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  text-align: center;
}
.sidebar-empty p {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* ═══════════════════════════════════════════════════════════════
   EDITOR
   ═══════════════════════════════════════════════════════════════ */
#editor-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: var(--background);
}

.editor-title-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  flex-shrink: 0;
}
.editor-title-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  outline: none;
}
.editor-title-input::placeholder { color: var(--muted-foreground); opacity: 0.4; }
.editor-title-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ─── Toolbar ─────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  background: rgba(245, 245, 245, 0.3);
  padding: 4px 8px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-theme="dark"] .toolbar { background: rgba(38, 38, 38, 0.3); }
.toolbar::-webkit-scrollbar { height: 0; }

.toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  opacity: 0.4;
  flex-shrink: 0;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
}
.tool-btn:hover { 
  background: var(--accent); 
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.tool-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.tool-btn:disabled { opacity: 0.4; pointer-events: none; }
.tool-btn.active { 
  background: var(--accent); 
  color: var(--accent-foreground);
  box-shadow: inset 0 0 0 1px var(--border);
}
.tool-btn.popover-open { 
  background: var(--accent); 
  color: var(--accent-foreground);
  box-shadow: inset 0 0 0 1px var(--ring), 0 2px 4px rgba(0,0,0,0.08);
}
.tool-btn svg { width: 14px; height: 14px; }

.tool-btn-text {
  width: auto;
  padding: 0 6px;
  font-size: 12px;
  color: var(--muted-foreground);
  gap: 4px;
  display: flex;
  align-items: center;
}
.tool-btn-text:hover { color: var(--foreground); }

/* Tooltip */
.tool-btn[data-tooltip]:hover::after,
.tool-btn[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  padding: 4px 8px;
  background: var(--foreground);
  color: var(--background);
  font-size: 11px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tool-btn[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Toolbar select dropdowns (Font Family, Font Size) */
.toolbar-select {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  min-width: 90px;
  max-width: 120px;
}
.toolbar-select:hover {
  border-color: var(--ring);
  background: var(--muted);
}
.toolbar-select:focus {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
[data-theme="dark"] .toolbar-select {
  background: var(--card);
  color: var(--card-foreground);
}
.toolbar-select option {
  font-size: 13px;
  padding: 4px;
}

/* Performance Mode - Disable heavy effects for large text */
.performance-mode #editor-content {
  transition: none !important;
  animation: none !important;
}

.performance-mode #editor-content * {
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.performance-mode .tool-btn,
.performance-mode .btn,
.performance-mode .note-item {
  transition: none !important;
  animation: none !important;
}

.performance-mode .editor-placeholder {
  display: none !important;
}

/* Responsive toolbar for mobile */
@media (max-width: 768px) {
  .toolbar {
    gap: 1px;
    padding: 0 4px;
  }
  .toolbar-select {
    min-width: 70px;
    max-width: 85px;
    font-size: 11px;
    padding: 0 4px;
  }
  .tool-btn {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .toolbar-select {
    min-width: 60px;
    max-width: 75px;
    font-size: 10px;
  }
  .toolbar-sep {
    margin: 0 1px;
  }
}

/* Link input popover */
.link-input-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  width: 256px;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
[data-theme="dark"] .link-input-popover { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.link-input-row {
  display: flex;
  gap: 6px;
}

/* ─── Heading dropdown ────────────────────────────────────── */
.heading-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  width: 160px;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
[data-theme="dark"] .heading-dropdown { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.heading-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--foreground);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.heading-dropdown-item:hover { 
  background: var(--accent); 
  color: var(--accent-foreground);
  transform: translateX(2px);
}
.heading-dropdown-item:active {
  transform: translateX(2px) scale(0.98);
}
.heading-dropdown-item svg { 
  width: 14px; 
  height: 14px;
  flex-shrink: 0;
}
.heading-dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.heading-dropdown-item:hover::before {
  transform: scaleY(1);
}

/* ─── Editor Body ─────────────────────────────────────────── */
.editor-body {
  position: relative;
  flex: 1;
  min-height: 0;
  pointer-events: none;
}

.editor-body > * {
  pointer-events: auto;
}

#editor-content {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 20px 24px;
  outline: none;
  line-height: 1.7;
  contain: layout style paint;
  will-change: contents;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
  -webkit-overflow-scrolling: touch;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important;
}
[data-theme="dark"] #editor-content {
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
#editor-content::-webkit-scrollbar { width: 6px; }
#editor-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
[data-theme="dark"] #editor-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

#editor-content:focus { outline: none; }

#editor-content h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; margin-top: 24px; }
#editor-content h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; margin-top: 16px; }
#editor-content h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; margin-top: 12px; }
#editor-content p { margin-bottom: 8px; line-height: 1.7; }
#editor-content ul { margin-bottom: 8px; padding-left: 24px; list-style-type: disc; }
#editor-content ol { margin-bottom: 8px; padding-left: 24px; list-style-type: decimal; }
#editor-content li { margin-bottom: 4px; line-height: 1.6; }
#editor-content a { color: var(--amber-600); text-decoration: underline; }
[data-theme="dark"] #editor-content a { color: var(--amber-400); }
#editor-content pre {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 12px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  overflow-x: auto;
  margin: 8px 0;
}
#editor-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.editor-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

/* Show only when data-empty attribute is present (set by inline script) */
.editor-placeholder[data-empty] {
  display: flex;
  animation: editorEmptyFadeIn 0.3s ease-out both;
}

@keyframes editorEmptyFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty state centered container */
.editor-empty-state {
  text-align: center;
  user-select: none;
  opacity: 0.65;
}

.editor-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--muted-foreground);
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.editor-empty-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted-foreground);
  opacity: 0.7;
  margin: 0;
  letter-spacing: 0;
}

[data-theme="dark"] .editor-placeholder { color: rgba(244, 244, 245, 0.4); }
[data-theme="dark"] .editor-empty-title { color: rgba(244, 244, 245, 0.5); }
[data-theme="dark"] .editor-empty-sub   { color: rgba(244, 244, 245, 0.3); }

[data-theme="light"] .editor-placeholder { color: rgba(28, 25, 23, 0.4); }
[data-theme="light"] .editor-empty-title { color: rgba(28, 25, 23, 0.45); }
[data-theme="light"] .editor-empty-sub   { color: rgba(28, 25, 23, 0.3); }

/* Editor empty state (no note selected) */
#editor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  background: var(--background);
}
#editor-empty .empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--muted);
}
#editor-empty .empty-icon svg { width: 32px; height: 32px; color: var(--muted-foreground); opacity: 0.4; }
#editor-empty p { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
#editor-empty .empty-hint { font-size: 12px; color: var(--muted-foreground); opacity: 0.6; margin-top: -8px; }

/* ═══════════════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
#status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: rgba(245, 245, 245, 0.3);
  padding: 0 12px;
  font-size: 11px;
  color: var(--muted-foreground);
  user-select: none;
}
[data-theme="dark"] #status-bar { background: rgba(38, 38, 38, 0.3); }

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.status-sep {
  color: var(--border);
}

.status-saved { color: var(--emerald-600); }
[data-theme="dark"] .status-saved { color: var(--emerald-500); }
.status-saving { color: var(--amber-600); }
[data-theme="dark"] .status-saving { color: var(--amber-400); }
.status-unsaved { color: var(--orange-500); }

.status-icon { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.status-icon svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON
   ═══════════════════════════════════════════════════════════════ */
#fab {
  position: fixed;
  bottom: 36px;
  right: 24px;
  z-index: 30;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(to right, var(--amber-500), var(--orange-500));
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: all 0.2s;
}
#fab:hover {
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.4);
  transform: scale(1.05);
  background: linear-gradient(to right, var(--amber-600), var(--orange-600));
}
#fab svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════
   DIALOGS / MODALS
   ═══════════════════════════════════════════════════════════════ */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s;
}
.dialog-overlay.hidden { display: none; }

.dialog {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  max-width: 448px;
  width: calc(100% - 32px);
  animation: slideUp 0.15s;
}
[data-theme="dark"] .dialog { box-shadow: 0 8px 32px rgba(0,0,0,0.5); }

.dialog-sm { max-width: 384px; }

/* Centered modal for important confirmations */
.dialog-centered {
  animation: slideUpCenter 0.25s ease-out;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
}
@keyframes slideUpCenter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.dialog-header h3 { font-size: 14px; font-weight: 600; }
.dialog-header-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dialog-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.1);
}
.dialog-icon svg { width: 16px; height: 16px; color: var(--amber-600); }
[data-theme="dark"] .dialog-icon svg { color: var(--amber-400); }

.dialog-body {
  padding: 16px 20px;
}
.dialog-body p {
  font-size: 13px;
  color: var(--foreground);
  line-height: 1.5;
}
.dialog-body .dialog-desc {
  font-size: 12px;
  color: var(--muted-foreground);
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.form-group {
  margin-bottom: 12px;
}
.form-group:last-child { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--foreground);
}
.form-error {
  font-size: 12px;
  color: var(--destructive);
  margin-top: 4px;
}

/* ─── Settings Dialog ─────────────────────────────────────── */
.settings-scroll {
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
[data-theme="dark"] .settings-scroll { scrollbar-color: rgba(255,255,255,0.15) transparent; }

.settings-section {
  margin-bottom: 20px;
}
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* Theme cards */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: none;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--foreground);
}
.theme-card:hover { background: var(--accent); color: var(--accent-foreground); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); transition: all 0.2s ease; }
.theme-card.active {
  border-color: var(--amber-500);
  background: rgba(99, 102, 241, 0.05);
  color: var(--amber-600);
}
[data-theme="dark"] .theme-card.active { color: var(--amber-400); }
.theme-card svg { width: 16px; height: 16px; }
.theme-card span { font-size: 12px; font-weight: 500; }

/* Font size slider */
.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.slider-value {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber-500);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber-500);
  border: none;
  cursor: pointer;
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted-foreground);
  opacity: 0.6;
  margin-top: 4px;
}

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-label-group { }
.toggle-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.toggle-desc { font-size: 11px; color: var(--muted-foreground); opacity: 0.7; margin-top: 2px; }

.switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--input);
  cursor: pointer;
  border: none;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch.on { background: var(--amber-500); }
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.switch.on::after { transform: translateX(18px); }

/* Data management buttons */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.settings-info {
  text-align: center;
  padding: 8px 0;
}
.settings-info p { font-size: 11px; color: var(--muted-foreground); }
.settings-info .version { opacity: 0.6; margin-top: 2px; }

/* ─── About Dialog ────────────────────────────────────────── */
.about-title {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 0 0 4px 0;
}
.about-title .gradient-text {
  background: linear-gradient(to right, var(--amber-500), var(--orange-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-title .version { font-weight: 400; font-size: 13px; color: var(--muted-foreground); margin-left: 6px; }
.about-content { text-align: center; font-size: 12px; color: var(--muted-foreground); line-height: 1.6; }
.about-content .feature-box, .about-content .shortcut-box {
  background: rgba(245, 245, 245, 0.5);
  border-radius: var(--radius);
  padding: 10px;
  text-align: left;
  margin: 10px 0;
}
[data-theme="dark"] .about-content .feature-box,
[data-theme="dark"] .about-content .shortcut-box {
  background: rgba(38, 38, 38, 0.5);
}
.about-content .box-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.about-content ul { padding-left: 16px; }
.about-content li { margin-bottom: 2px; font-size: 12px; }
.about-content kbd {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--muted);
  font-size: 10px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.about-privacy {
  font-size: 10px;
  color: var(--muted-foreground);
  opacity: 0.5;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENUS (navbar)
   ═══════════════════════════════════════════════════════════════ */
.dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  min-width: 192px;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  animation: fadeIn 0.1s;
}
[data-theme="dark"] .dropdown-menu { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.dropdown-menu.right { left: auto; right: 0; }
.dropdown-menu.wide { min-width: 240px; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--foreground);
  transition: background 0.1s;
  text-align: left;
}
.dropdown-item:hover { background: var(--accent); color: var(--accent-foreground); transform: translateX(2px); transition: all 0.15s ease; }
.dropdown-item.active { background: var(--accent); }
.dropdown-item.destructive { color: var(--destructive); }
.dropdown-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.dropdown-item .shortcut {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted-foreground);
}

.dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 48px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--foreground);
  color: var(--background);
  border-radius: var(--radius);
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideUp 0.2s;
  pointer-events: auto;
  max-width: 320px;
}
.toast.destructive { background: var(--destructive); color: white; }

/* ═══════════════════════════════════════════════════════════════
   BLOG PAGE
   ═══════════════════════════════════════════════════════════════ */
#blog-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--background);
}

.blog-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  background: rgba(245, 245, 245, 0.2);
}
[data-theme="dark"] .blog-header { background: rgba(38, 38, 38, 0.2); }
.blog-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.blog-header .blog-desc { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }

.blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.cat-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.15s;
}
.cat-btn:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transition: all 0.2s ease;
}
[data-theme="dark"] .cat-btn:hover { color: var(--amber-400); }
.cat-btn.active {
  background: var(--amber-500);
  color: white;
  border-color: var(--amber-500);
}

.blog-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
[data-theme="dark"] .blog-content { scrollbar-color: rgba(255,255,255,0.15) transparent; }
.blog-content::-webkit-scrollbar { width: 6px; }
.blog-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
[data-theme="dark"] .blog-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* Blog Grid - 4 Column Responsive */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Blog Card */
.blog-card {
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(229, 229, 229, 0.5);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s;
}
[data-theme="dark"] .blog-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(23, 23, 23, 0.8);
}
.blog-card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);
  border-color: rgba(229, 229, 229, 0.8);
  transform: translateY(-2px);
}
[data-theme="dark"] .blog-card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.blog-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-placeholder {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 245, 245, 0.5);
}
[data-theme="dark"] .blog-card-placeholder { background: rgba(38, 38, 38, 0.5); }
.blog-card-placeholder svg { width: 24px; height: 24px; color: var(--muted-foreground); opacity: 0.3; }

.blog-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-card-cat {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--amber-600);
  font-size: 10px;
  font-weight: 500;
  align-self: flex-start;
}
[data-theme="dark"] .blog-card-cat { color: var(--amber-400); }

.blog-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.blog-card:hover .blog-card-title { color: var(--amber-600); }
[data-theme="dark"] .blog-card:hover .blog-card-title { color: var(--amber-400); }

.blog-card-excerpt {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2px;
}
.blog-card-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(115, 115, 115, 0.6);
}
[data-theme="dark"] .blog-card-date { color: rgba(163, 163, 163, 0.6); }
.blog-card-date svg { width: 10px; height: 10px; }
.blog-card-read {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--amber-600);
  opacity: 0;
  transition: opacity 0.15s;
}
[data-theme="dark"] .blog-card-read { color: var(--amber-400); }
.blog-card:hover .blog-card-read { opacity: 1; }
.blog-card-read svg { width: 12px; height: 12px; margin-left: 2px; }

/* Blog Empty */
.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 16px;
  text-align: center;
}
.blog-empty .empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(245, 245, 245, 0.5);
  margin-bottom: 12px;
}
[data-theme="dark"] .blog-empty .empty-icon { background: rgba(38, 38, 38, 0.5); }
.blog-empty .empty-icon svg { width: 24px; height: 24px; color: var(--muted-foreground); opacity: 0.4; }
.blog-empty p { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.blog-empty .hint { font-size: 12px; color: var(--muted-foreground); opacity: 0.6; margin-top: 4px; }

/* Blog Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}
.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.page-btn:hover:not(:disabled) { background: var(--accent); }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-btn.active {
  background: var(--amber-500);
  color: white;
  border-color: var(--amber-500);
}
.page-btn svg { width: 14px; height: 14px; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, rgba(245,245,245,0.5) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════════ */
#single-post {
  max-width: 768px;
  margin: 0 auto;
  padding: 32px 24px;
}

.single-post-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 12px;
  border: none;
  background: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--foreground);
  margin-bottom: 16px;
  margin-left: -8px;
  transition: background 0.15s;
}
.single-post-back:hover { background: var(--accent); }
.single-post-back svg { width: 14px; height: 14px; }

.single-post-card {
  border-radius: 16px;
  border: 1px solid rgba(229, 229, 229, 0.5);
  background: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
[data-theme="dark"] .single-post-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(23, 23, 23, 0.8);
}

.single-post-featured {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.single-post-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-post-body {
  padding: 24px;
}
.single-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.single-post-cat {
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--amber-600);
  font-size: 12px;
}
[data-theme="dark"] .single-post-cat { color: var(--amber-400); }
.single-post-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.single-post-date svg { width: 12px; height: 12px; }

.single-post-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .single-post-title { font-size: 28px; }
}

.single-post-content {
  font-size: 14px;
  line-height: 1.75;
  color: var(--foreground);
}
.single-post-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.single-post-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.single-post-content p {
  margin-bottom: 0.75rem;
}
.single-post-content ul {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  list-style-type: disc;
}
.single-post-content li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}
.single-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ═══════════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════════ */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 12px;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--amber-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loading-text { font-size: 14px; color: var(--muted-foreground); }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    top: 44px;
    left: 0;
    z-index: 50;
    width: 280px;
    height: calc(100vh - 44px);
    box-shadow: 4px 0 16px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  [data-theme="dark"] #sidebar {
    box-shadow: 4px 0 16px rgba(0,0,0,0.3);
  }
  #sidebar:not(.collapsed) {
    transform: translateX(0);
  }
  #sidebar.collapsed {
    width: 280px;
    box-shadow: none;
    transform: translateX(-100%);
  }
  .note-item { contain-intrinsic-size: 0 72px; }
  .logo-text { display: none; }
  .nav-center .menu-text { display: none; }
  .nav-right .about-text { display: none; }
  #fab { bottom: 40px; right: 16px; }
  .blog-header-search { display: none; }
  .editor-title-bar { padding: 8px 12px; }
  #editor-content { padding: 16px; }
}

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TOUCH PERFORMANCE
   ═══════════════════════════════════════════════════════════════ */
.overflow-y-auto, .notes-list, .blog-content, #editor-content {
  touch-action: pan-y;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR OVERLAY (mobile)
   ═══════════════════════════════════════════════════════════════ */
#sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 35;
}

/* ═══════════════════════════════════════════════════════════════
   WORDPRESS OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
.wp-block-image img {
  max-width: 100%;
  height: auto;
}
.aligncenter {
  display: block;
  margin: 1rem auto;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES (added v2.2)
   ═══════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 8px 14px;
  background: var(--amber-500);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  z-index: 9999;
  text-decoration: none;
}
.skip-to-content:focus {
  left: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR HEADER & PRIVACY BADGE (refined v2.2)
   ═══════════════════════════════════════════════════════════════ */
.sidebar-header-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sidebar-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
  letter-spacing: -0.01em;
}
.sidebar-title #notes-count {
  color: var(--muted-foreground);
  font-weight: 500;
}
.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.10);
  color: var(--emerald-600);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  width: max-content;
}
[data-theme="dark"] .privacy-badge {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}
.privacy-badge svg { width: 11px; height: 11px; }

/* Sidebar trust line + cross-link nav */
.sidebar-trust {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0 0 10px;
}
.sidebar-trust svg { color: var(--emerald-500); flex-shrink: 0; }
.sidebar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.sidebar-links a {
  font-size: 11px;
  color: var(--muted-foreground);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-links a:hover {
  color: var(--amber-600);
  border-bottom-color: currentColor;
}
[data-theme="dark"] .sidebar-links a:hover { color: var(--amber-400); }

/* ═══════════════════════════════════════════════════════════════
   SEO CONTENT PAGES (about, features, faq, privacy, etc.)
   These pages render inside #app-body which already scrolls; the
   editor on the homepage is unaffected because front-page.php does
   not include the .content-page wrapper.
   ═══════════════════════════════════════════════════════════════ */
.content-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  background: var(--background);
  color: var(--foreground);
}
.content-page,
.content-page main {
  scroll-behavior: smooth;
}

.content-breadcrumbs {
  padding: 14px 24px 0;
  font-size: 12px;
  color: var(--muted-foreground);
}
.content-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 6px;
  opacity: 0.5;
}
.content-breadcrumbs a {
  color: var(--muted-foreground);
  text-decoration: none;
}
.content-breadcrumbs a:hover { color: var(--amber-600); }
.content-breadcrumbs li[aria-current="page"] {
  color: var(--foreground);
  font-weight: 500;
}

.content-hero {
  max-width: 768px;
  margin: 0 auto;
  padding: 24px 24px 8px;
  width: 100%;
}
.content-eyebrow {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.10);
  color: var(--amber-600);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
[data-theme="dark"] .content-eyebrow { color: var(--amber-400); }
.content-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .content-title { font-size: 36px; }
}
.content-subtitle {
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--muted-foreground);
  line-height: 1.55;
  max-width: 640px;
}

.content-body {
  max-width: 768px;
  margin: 0 auto;
  width: 100%;
  padding: 16px 24px 24px;
}
.content-section {
  margin-top: 28px;
}
.content-section h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--foreground);
  scroll-margin-top: 80px;
}
.content-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--foreground);
}
.content-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--foreground);
  margin: 0 0 12px;
}
.content-section a { color: var(--amber-600); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .content-section a { color: var(--amber-400); }
.content-section code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--muted);
  color: var(--foreground);
}
.content-section kbd {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.content-meta {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.content-list {
  margin: 0 0 12px;
  padding-left: 22px;
}
.content-list li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--foreground);
  margin-bottom: 4px;
}

.content-grid-2,
.content-grid-3 {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .content-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .content-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .content-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.content-tile {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.4);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="dark"] .content-tile {
  background: rgba(31, 41, 55, 0.55);
}
.content-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 8px 24px -12px rgba(99, 102, 241, 0.25);
}
.content-tile h3 { font-size: 14px; margin-bottom: 6px; }
.content-tile p { font-size: 13px; line-height: 1.55; color: var(--muted-foreground); margin: 0; }

.content-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.content-steps li {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .content-steps li { background: rgba(31, 41, 55, 0.55); }
.content-steps .step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--amber-500), var(--orange-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.content-steps h3 { margin: 0 0 4px; font-size: 14px; }
.content-steps p { margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .faq-item { background: rgba(31, 41, 55, 0.55); }
.faq-item[open] {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 6px 20px -10px rgba(99, 102, 241, 0.25);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--muted-foreground);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 18px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--foreground);
  margin: 0;
}

/* Contact */
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: rgba(99, 102, 241, 0.10);
  color: var(--amber-700);
  font-size: 15px;
  font-weight: 600;
}
[data-theme="dark"] .contact-email { color: var(--amber-300); background: rgba(99, 102, 241, 0.16); }
.contact-email a { color: inherit; text-decoration: none; }

/* Footer CTA + related links */
.content-footer-cta {
  max-width: 768px;
  margin: 32px auto 0;
  padding: 0 24px 40px;
  width: 100%;
}
.content-cta-card {
  padding: 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(6, 182, 212, 0.10));
  border: 1px solid rgba(99, 102, 241, 0.25);
  text-align: center;
}
.content-cta-card h2 { font-size: 20px; margin: 0 0 6px; }
.content-cta-card p  { font-size: 14px; margin: 0 0 14px; color: var(--muted-foreground); }
.content-cta-card .btn { text-decoration: none; }

.content-related {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.content-related h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin: 0 0 10px;
}
.content-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.content-related a {
  font-size: 13px;
  color: var(--foreground);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.content-related a:hover {
  color: var(--amber-600);
  border-bottom-color: currentColor;
}
[data-theme="dark"] .content-related a:hover { color: var(--amber-400); }

/* Allow body to scroll for content pages without breaking the editor.
   The notepad page keeps overflow:hidden via .is-notepad-app body class. */
body:not(.is-notepad-app) {
  overflow: auto;
  height: auto;
  min-height: 100vh;
}
body:not(.is-notepad-app) #app-shell {
  height: auto;
  min-height: 100vh;
}
body:not(.is-notepad-app) #app-body {
  min-height: calc(100vh - 80px);
}

/* ═══════════════════════════════════════════════════════════════
   PRINT (clean, content-only)
   ═══════════════════════════════════════════════════════════════ */
@media print {
  #navbar, #tab-bar, #status-bar, #fab,
  #sidebar, .top-ad, .toolbar, .editor-title-bar,
  .content-footer-cta, .content-breadcrumbs {
    display: none !important;
  }
  body, #app-shell, #app-body, .content-page {
    overflow: visible !important;
    height: auto !important;
    background: #fff !important;
    color: #000 !important;
  }
  .content-tile, .faq-item, .content-steps li {
    page-break-inside: avoid;
    border-color: #ddd !important;
    background: #fff !important;
  }
}


/* Refine sidebar header/footer for new layout (does not change behavior) */
.sidebar-header { padding: 10px 12px; }
.sidebar-footer {
  text-align: left;
  padding: 10px 12px 12px;
}
.sidebar-footer p.sidebar-trust { opacity: 1; font-size: 12px; }
.sidebar-footer p { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   TRUE-BLACK DARK THEME (v2.3)
   Pure black canvas with subtle elevation tiers and warmer accents.
   Overrides earlier tokens via the cascade.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Surfaces — true black with one perceptible step per tier */
  --background:           #000000;
  --foreground:           #f4f4f5;
  --card:                 #0a0a0a;
  --card-foreground:      #f4f4f5;
  --popover:              #0d0d0d;
  --popover-foreground:   #f4f4f5;

  --primary:              #fafafa;
  --primary-foreground:   #000000;
  --secondary:            #0a0a0a;
  --secondary-foreground: #f4f4f5;

  --muted:                #111111;
  --muted-foreground:     #9ca3af;

  --accent:               #161616;
  --accent-foreground:    #f4f4f5;

  --destructive:          #ef4444;
  --border:               rgba(255, 255, 255, 0.07);
  --input:                rgba(255, 255, 255, 0.10);
  --ring:                 var(--amber-500);

  /* Legacy aliases used in early rules */
  --bg-main:    #000000;
  --bg-sidebar: #050505;
  --bg-card:    #0a0a0a;
  --text-main:  #f4f4f5;
  --text-muted: #9ca3af;

  --color-scheme: dark;
}

/* App shell + body get true black */
[data-theme="dark"] body,
[data-theme="dark"] #app-shell {
  background: #000;
}

/* Sidebar: nearly-black with subtle right border, no blue tint */
[data-theme="dark"] #sidebar {
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right-color: rgba(255, 255, 255, 0.06);
}

/* Navbar / tab bar / toolbar / status bar — flat black with hairline border */
[data-theme="dark"] #navbar,
[data-theme="dark"] #tab-bar,
[data-theme="dark"] .toolbar,
[data-theme="dark"] #status-bar {
  background: #000;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] #navbar { border-bottom-color: rgba(255, 255, 255, 0.06); }

/* Editor surface */
[data-theme="dark"] #editor-area,
[data-theme="dark"] #editor-empty,
[data-theme="dark"] #editor-content {
  background: #000;
  color: #f4f4f5;
}
[data-theme="dark"] .editor-title-input { color: #f4f4f5; }
[data-theme="dark"] .editor-title-input::placeholder { color: rgba(244, 244, 245, 0.35); }

/* Cards / dialogs / popovers / dropdowns — slight elevation on pure black */
[data-theme="dark"] .dialog,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .heading-dropdown,
[data-theme="dark"] .link-input-popover {
  background: #0d0d0d;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Inputs */
[data-theme="dark"] .input,
[data-theme="dark"] .toolbar-select {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.10);
  color: #f4f4f5;
}
[data-theme="dark"] .input::placeholder { color: rgba(244, 244, 245, 0.35); }
[data-theme="dark"] .input:focus,
[data-theme="dark"] .toolbar-select:focus {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
  outline: none;
}

/* Buttons */
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .tool-btn:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .note-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f5;
}
[data-theme="dark"] .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f4f4f5;
}
[data-theme="dark"] .btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.20);
}
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--amber-500), var(--orange-500));
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 600;
}
[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}

/* Notes list items */
[data-theme="dark"] .note-item:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
[data-theme="dark"] .note-item.active {
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 0.30);
}
[data-theme="dark"] .note-item.active .note-title { color: var(--amber-300); }

/* Tabs */
[data-theme="dark"] #tab-bar { background: #000; }
[data-theme="dark"] .tab-btn { color: rgba(244, 244, 245, 0.65); }
[data-theme="dark"] .tab-btn:hover { color: #f4f4f5; background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .tab-btn.active {
  color: var(--amber-400);
  background: rgba(99, 102, 241, 0.10);
}

/* Code / pre / kbd inside editor and content pages */
[data-theme="dark"] #editor-content pre,
[data-theme="dark"] #editor-content code,
[data-theme="dark"] .content-section code,
[data-theme="dark"] .content-section kbd {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f4f4f5;
}

/* Privacy badge keeps emerald accent but on black */
[data-theme="dark"] .privacy-badge {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

/* Content pages */
[data-theme="dark"] .content-page,
[data-theme="dark"] body:not(.is-notepad-app) #app-shell {
  background: #000;
}
[data-theme="dark"] .content-tile,
[data-theme="dark"] .content-steps li,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .contact-email {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .content-tile:hover {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 10px 28px -14px rgba(99, 102, 241, 0.35);
}
[data-theme="dark"] .faq-item[open] {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 6px 24px -10px rgba(99, 102, 241, 0.30);
}
[data-theme="dark"] .content-cta-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(6, 182, 212, 0.10));
  border-color: rgba(99, 102, 241, 0.30);
}
[data-theme="dark"] .content-eyebrow {
  background: rgba(99, 102, 241, 0.14);
  color: var(--amber-300);
}
[data-theme="dark"] .content-related a:hover { color: var(--amber-300); }

/* Blog cards on true black */
[data-theme="dark"] .blog-card,
[data-theme="dark"] .single-post-card {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .blog-card:hover {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 10px 28px -14px rgba(99, 102, 241, 0.30);
}
[data-theme="dark"] .blog-header { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .cat-btn:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .cat-btn.active {
  background: var(--amber-500);
  color: #0a0a0a;
}

/* Selection */
[data-theme="dark"] ::selection {
  background: rgba(99, 102, 241, 0.55);
  color: #000;
}

/* Scrollbars */
[data-theme="dark"] *::-webkit-scrollbar-thumb,
[data-theme="dark"] .notes-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .blog-content::-webkit-scrollbar-thumb,
[data-theme="dark"] #editor-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .settings-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .notes-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .blog-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Dialog overlays a touch darker */
[data-theme="dark"] .dialog-overlay {
  background: rgba(0, 0, 0, 0.78);
}

/* Top ad band stays visually quiet on black */
[data-theme="dark"] .top-ad { background: transparent; }

/* Update theme-color meta dynamically via media query: keeps mobile chrome black */
@media (prefers-color-scheme: dark) {
  html[data-theme="dark"] { background: #000; }
}


/* ═══════════════════════════════════════════════════════════════
   PINNED NOTE STATE (v2.4)
   When a note is pinned, give it a distinct indigo accent.
   Active pinned notes blend both colors (amber active + indigo pin
   border-left strip) so users can read both states at a glance.
   ═══════════════════════════════════════════════════════════════ */

/* Always-on pin indicator badge color */
.note-badges svg { color: var(--amber-500); }

/* Pinned card — light theme */
.note-item.pinned {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06) 0%,
    rgba(99, 102, 241, 0.02) 100%
  );
  border-color: rgba(99, 102, 241, 0.22);
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.08);
  position: relative;
}
.note-item.pinned::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  pointer-events: none;
}
.note-item.pinned .note-title { color: #4f46e5; font-weight: 600; }
.note-item.pinned .note-badges svg { color: #6366f1; }
.note-item.pinned:hover {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.10) 0%,
    rgba(99, 102, 241, 0.04) 100%
  );
  border-color: rgba(99, 102, 241, 0.40);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
  transform: translateX(2px);
}

/* Pinned + active in same item — amber wins as the “focused” state but
   we keep the indigo strip on the left as a clear pin signal. */
.note-item.pinned.active {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.10) 0%,
    rgba(99, 102, 241, 0.04) 100%
  );
  border-color: rgba(99, 102, 241, 0.30);
}
.note-item.pinned.active::before {
  background: linear-gradient(180deg, #6366f1, #06b6d4);
}
.note-item.pinned.active .note-title { color: var(--amber-700); }

/* Dark theme — true black with indigo glow */
[data-theme="dark"] .note-item.pinned {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.14) 0%,
    rgba(99, 102, 241, 0.04) 100%
  );
  border-color: rgba(129, 140, 248, 0.28);
  box-shadow: 0 1px 3px rgba(129, 140, 248, 0.10);
}
[data-theme="dark"] .note-item.pinned::before {
  background: linear-gradient(180deg, #818cf8, #c084fc);
  box-shadow: 0 0 8px rgba(129, 140, 248, 0.55);
}
[data-theme="dark"] .note-item.pinned .note-title { color: #a5b4fc; }
[data-theme="dark"] .note-item.pinned .note-badges svg { color: #a5b4fc; }
[data-theme="dark"] .note-item.pinned:hover {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.20) 0%,
    rgba(99, 102, 241, 0.06) 100%
  );
  border-color: rgba(129, 140, 248, 0.50);
  box-shadow: 0 6px 20px -8px rgba(129, 140, 248, 0.45);
}
[data-theme="dark"] .note-item.pinned.active {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.14) 0%,
    rgba(99, 102, 241, 0.04) 100%
  );
  border-color: rgba(99, 102, 241, 0.40);
}
[data-theme="dark"] .note-item.pinned.active::before {
  background: linear-gradient(180deg, #818cf8, #22d3ee);
}
[data-theme="dark"] .note-item.pinned.active .note-title { color: var(--amber-300); }

/* Make compact view show a slimmer accent bar */
.note-item.pinned.compact::before {
  top: 6px;
  bottom: 6px;
  width: 2px;
}

/* The pin badge (always visible at the right) gets a subtle pulse the
   moment a user pins a note. It runs only once. */
@keyframes pinPulse {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(99, 102, 241, 0)); }
  40%  { transform: scale(1.35); filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.55)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(99, 102, 241, 0)); }
}
.note-item.pinned .note-badges svg:first-child {
  animation: pinPulse 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .note-item.pinned .note-badges svg:first-child { animation: none; }
}

/* Pin/unpin action button — colored hover hint */
.note-action-btn[title="Pin"]:hover    { color: #6366f1; }
.note-action-btn[title="Unpin"]:hover  { color: #ef4444; }
[data-theme="dark"] .note-action-btn[title="Pin"]:hover   { color: #a5b4fc; }
[data-theme="dark"] .note-action-btn[title="Unpin"]:hover { color: #fca5a5; }


/* ═══════════════════════════════════════════════════════════════
   BLOG UI UPGRADE (v2.4)
   Larger hero header, modern card design, clear hierarchy,
   skeleton-style hover, polished empty/pagination states.
   ═══════════════════════════════════════════════════════════════ */

.blog-header {
  padding: 28px 24px 18px;
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06) 0%,
    transparent 100%
  );
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .blog-header {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06) 0%,
    transparent 100%
  );
}
.blog-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--foreground);
  margin: 0;
}
@media (min-width: 768px) {
  .blog-header h1 { font-size: 34px; }
}
.blog-header .blog-desc {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-top: 6px;
  max-width: 56ch;
}

/* Top row: title + search */
.blog-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.blog-header-search { width: 100%; max-width: 320px; }
.blog-header-search .search-wrapper { width: 100% !important; }
.blog-header-search .input {
  height: 38px;
  border-radius: 10px;
  background: var(--card);
  border-color: var(--border);
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.blog-header-search .input:focus {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.blog-header-search .search-icon { left: 12px; color: var(--muted-foreground); }
.blog-header-search .input { padding-left: 36px !important; }

/* Categories — modern chip row */
.blog-categories {
  margin-top: 18px;
  gap: 8px;
}
.cat-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.cat-btn:hover {
  background: var(--accent);
  border-color: rgba(99, 102, 241, 0.30);
  color: var(--amber-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(99, 102, 241, 0.30);
}
[data-theme="dark"] .cat-btn:hover {
  border-color: rgba(99, 102, 241, 0.45);
  color: var(--amber-300);
  box-shadow: 0 4px 14px -6px rgba(99, 102, 241, 0.40);
}
.cat-btn.active {
  background: linear-gradient(135deg, var(--amber-500), var(--orange-500));
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.40);
}
[data-theme="dark"] .cat-btn.active { color: #0a0a0a; }
.cat-btn.active:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Blog content area */
.blog-content {
  padding: 24px;
}
@media (min-width: 768px) {
  .blog-content { padding: 28px; }
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 540px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .blog-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 14px 30px -16px rgba(99, 102, 241, 0.30), 0 4px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .blog-card { background: #0a0a0a; }
[data-theme="dark"] .blog-card:hover {
  box-shadow: 0 14px 36px -18px rgba(99, 102, 241, 0.45);
  border-color: rgba(99, 102, 241, 0.45);
}

.blog-card-img,
.blog-card-placeholder {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.blog-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(0, 0, 0, 0.25) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.blog-card:hover .blog-card-img::after { opacity: 1; }
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card:hover .blog-card-img img { transform: scale(1.06); }

.blog-card-placeholder {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08),
    rgba(6, 182, 212, 0.05)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .blog-card-placeholder {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.10),
    rgba(99, 102, 241, 0.06)
  );
}
.blog-card-placeholder svg {
  width: 36px;
  height: 36px;
  color: var(--amber-500);
  opacity: 0.55;
}

.blog-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.blog-card-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--amber-700);
}
[data-theme="dark"] .blog-card-cat {
  background: rgba(99, 102, 241, 0.18);
  color: var(--amber-300);
}

.blog-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s;
}
.blog-card:hover .blog-card-title { color: var(--amber-600); }
[data-theme="dark"] .blog-card:hover .blog-card-title { color: var(--amber-300); }

.blog-card-excerpt {
  font-size: 12.5px;
  color: var(--muted-foreground);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.blog-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-card-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted-foreground);
}
.blog-card-date svg { width: 11px; height: 11px; }
.blog-card-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber-600);
  letter-spacing: 0.01em;
  opacity: 0.7;
  transition: opacity 0.18s, gap 0.18s;
}
.blog-card:hover .blog-card-read { opacity: 1; gap: 7px; }
[data-theme="dark"] .blog-card-read { color: var(--amber-300); }

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s;
}
.page-btn:hover:not(:disabled):not(.active) {
  background: var(--accent);
  border-color: rgba(99, 102, 241, 0.35);
  color: var(--amber-600);
}
.page-btn.active {
  background: linear-gradient(135deg, var(--amber-500), var(--orange-500));
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.40);
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Empty state polish */
.blog-empty {
  padding: 100px 20px;
}
.blog-empty .empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.06));
}
.blog-empty .empty-icon svg { width: 32px; height: 32px; color: var(--amber-500); opacity: 0.7; }
.blog-empty p { font-size: 16px; font-weight: 600; margin-top: 4px; color: var(--foreground); }
.blog-empty .hint { font-size: 13px; margin-top: 6px; }

/* Single-post visual upgrade — softer card, tighter typography */
#single-post { padding: 28px 24px 60px; }
.single-post-back {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.single-post-back:hover { background: var(--accent); color: var(--amber-600); }
[data-theme="dark"] .single-post-back:hover { color: var(--amber-300); }

.single-post-card {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.single-post-featured img { transition: transform 0.6s; }
.single-post-card:hover .single-post-featured img { transform: scale(1.02); }

.single-post-body { padding: 28px; }
@media (min-width: 768px) {
  .single-post-body { padding: 40px 48px; }
}

.single-post-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
}

.single-post-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .single-post-title { font-size: 36px; }
}

.single-post-content { font-size: 15.5px; line-height: 1.78; }
.single-post-content h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2.25rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.single-post-content h3 { font-size: 17px; }
.single-post-content p  { margin-bottom: 1rem; }
.single-post-content blockquote {
  border-left: 3px solid var(--amber-500);
  padding: 8px 16px;
  margin: 1.25rem 0;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 0 10px 10px 0;
  color: var(--foreground);
  font-style: italic;
}
[data-theme="dark"] .single-post-content blockquote { background: rgba(99, 102, 241, 0.10); }
.single-post-content code {
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--muted);
}
.single-post-content pre {
  background: var(--muted);
  padding: 16px;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid var(--border);
}
[data-theme="dark"] .single-post-content pre {
  background: #0a0a0a;
}
.single-post-content img {
  border-radius: 12px;
  margin: 1.25rem 0;
}

/* Subtle loading shimmer hint while images load (no JS needed) */
.blog-card-img,
.single-post-featured {
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    rgba(99, 102, 241, 0.05) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.blog-card-img img,
.single-post-featured img { background: var(--card); }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card-img, .single-post-featured { animation: none; background: var(--muted); }
}


/* ═══════════════════════════════════════════════════════════════
   SHARE DIALOG (v2.5)
   ═══════════════════════════════════════════════════════════════ */
.share-link-row {
  display: flex;
  gap: 8px;
  margin: 6px 0 16px;
}
.share-link-row .input {
  flex: 1;
  font-size: 12px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
#share-copy-btn { flex-shrink: 0; }

.share-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.share-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.share-action:hover {
  border-color: rgba(99, 102, 241, 0.45);
  color: var(--amber-600);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(99, 102, 241, 0.30);
}
[data-theme="dark"] .share-action:hover { color: var(--amber-300); }
.share-action svg { width: 16px; height: 16px; flex-shrink: 0; }

.share-desc {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid var(--emerald-500);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--foreground);
  margin-bottom: 14px;
}
[data-theme="dark"] .share-desc {
  background: rgba(16, 185, 129, 0.10);
  color: #a7f3d0;
}
.share-note-meta {
  font-size: 11px;
  color: var(--muted-foreground);
  text-align: center;
  margin: 0;
}

@media (max-width: 480px) {
  .share-actions { grid-template-columns: repeat(2, 1fr); }
}

/* Share import dialog */
.share-import-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--muted);
  margin-top: 8px;
}
.share-import-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--foreground);
}
.share-import-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   IMPROVED PINNED NOTE COLOR (v2.5)
   Warmer cyan/teal palette — clearly distinct from amber-active
   and easier on the eye than the previous indigo. Overrides v2.4.
   ═══════════════════════════════════════════════════════════════ */

/* Light theme */
.note-item.pinned {
  background: linear-gradient(
    180deg,
    rgba(20, 184, 166, 0.06) 0%,
    rgba(6, 182, 212, 0.02) 100%
  );
  border-color: rgba(20, 184, 166, 0.30);
  box-shadow: 0 1px 3px rgba(20, 184, 166, 0.10);
}
.note-item.pinned::before {
  background: linear-gradient(180deg, #14b8a6, #06b6d4);
  box-shadow: 0 0 6px rgba(20, 184, 166, 0.35);
}
.note-item.pinned .note-title { color: #0f766e; font-weight: 600; }
.note-item.pinned .note-badges svg { color: #14b8a6; }
.note-item.pinned:hover {
  background: linear-gradient(
    180deg,
    rgba(20, 184, 166, 0.12) 0%,
    rgba(6, 182, 212, 0.04) 100%
  );
  border-color: rgba(20, 184, 166, 0.50);
  box-shadow: 0 6px 18px -6px rgba(20, 184, 166, 0.30);
}

/* Pinned + active: amber background wins, teal strip on left */
.note-item.pinned.active {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.10) 0%,
    rgba(99, 102, 241, 0.04) 100%
  );
  border-color: rgba(99, 102, 241, 0.35);
}
.note-item.pinned.active::before {
  background: linear-gradient(180deg, #14b8a6, #06b6d4);
}

/* Dark theme — true black with cyan glow */
[data-theme="dark"] .note-item.pinned {
  background: linear-gradient(
    180deg,
    rgba(20, 184, 166, 0.16) 0%,
    rgba(6, 182, 212, 0.04) 100%
  );
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: 0 1px 3px rgba(45, 212, 191, 0.12);
}
[data-theme="dark"] .note-item.pinned::before {
  background: linear-gradient(180deg, #2dd4bf, #22d3ee);
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.65);
}
[data-theme="dark"] .note-item.pinned .note-title { color: #5eead4; }
[data-theme="dark"] .note-item.pinned .note-badges svg { color: #5eead4; }
[data-theme="dark"] .note-item.pinned:hover {
  background: linear-gradient(
    180deg,
    rgba(20, 184, 166, 0.22) 0%,
    rgba(6, 182, 212, 0.08) 100%
  );
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 8px 22px -8px rgba(45, 212, 191, 0.50);
}
[data-theme="dark"] .note-item.pinned.active {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.14) 0%,
    rgba(99, 102, 241, 0.04) 100%
  );
}
[data-theme="dark"] .note-item.pinned.active::before {
  background: linear-gradient(180deg, #2dd4bf, #22d3ee);
}

/* Pin pulse keeps using the new color */
@keyframes pinPulse {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(20, 184, 166, 0)); }
  40%  { transform: scale(1.35); filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.65)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(20, 184, 166, 0)); }
}

/* Pin/unpin action button hover hints */
.note-action-btn[title="Pin"]:hover    { color: #14b8a6; background: rgba(20, 184, 166, 0.10); }
.note-action-btn[title="Unpin"]:hover  { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
[data-theme="dark"] .note-action-btn[title="Pin"]:hover   { color: #5eead4; background: rgba(20, 184, 166, 0.16); }
[data-theme="dark"] .note-action-btn[title="Unpin"]:hover { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }

/* Share action: emerald hover */
.note-action-btn[title="Share"]:hover { color: var(--emerald-600); background: rgba(16, 185, 129, 0.08); }
[data-theme="dark"] .note-action-btn[title="Share"]:hover { color: #6ee7b7; background: rgba(16, 185, 129, 0.14); }

/* Share toolbar button */
#btn-share-note { color: var(--muted-foreground); }
#btn-share-note:hover { color: var(--emerald-600); background: rgba(16, 185, 129, 0.10); }
[data-theme="dark"] #btn-share-note:hover { color: #6ee7b7; background: rgba(16, 185, 129, 0.14); }


/* ═══════════════════════════════════════════════════════════════
   BLOG UI v2 — refined cards, hero polish, dark-mode parity
   ═══════════════════════════════════════════════════════════════ */

/* Hero: stronger gradient, search input that survives dark mode */
[data-theme="dark"] .blog-header-search .input {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.10);
}
.blog-header-search .input::placeholder { color: var(--muted-foreground); }

/* Card image area should not shimmer once an <img> is present.
   The shimmer block we added earlier shows through on transparent
   backgrounds. Hide shimmer when the inner img is rendered. */
.blog-card-img:has(img) {
  background: var(--muted);
  animation: none;
}
.single-post-featured:has(img) {
  background: var(--muted);
  animation: none;
}

/* Card body fine-tune — legible 14px line-clamp on excerpt */
.blog-card-excerpt {
  font-size: 13px;
  line-height: 1.6;
}

/* Subtle "NEW" indicator for posts published in the last 7 days
   (purely visual, no JS required if a future template adds the
   .is-new class). Reserved hook for later. */
.blog-card.is-new::after {
  content: 'NEW';
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, var(--amber-500), var(--orange-500));
  color: #0a0a0a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 9999px;
  z-index: 2;
}
.blog-card { position: relative; }

/* Pagination buttons — focus ring */
.page-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
  border-color: var(--amber-500);
}

/* Mobile spacing */
@media (max-width: 540px) {
  .blog-header { padding: 22px 18px 14px; }
  .blog-header h1 { font-size: 24px; }
  .blog-header-search { max-width: 100%; }
  .blog-content { padding: 18px; }
  .blog-grid { gap: 16px; }
  .blog-card-body { padding: 14px; }
  .blog-card-title { font-size: 14.5px; }
  .blog-card-excerpt { -webkit-line-clamp: 2; }
}

/* Single-post: drop unused shimmer if no thumbnail */
.single-post-featured:empty {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   PIN COLOR — SIMPLE (v2.6, final)
   Overrides v2.4 / v2.5. No gradients, no glow, no thick stripe.
   Just a small dot indicator + a single subtle background tint.
   ═══════════════════════════════════════════════════════════════ */

/* Reset everything fancy from earlier versions */
.note-item.pinned,
.note-item.pinned:hover,
.note-item.pinned.active {
  background: var(--card);
  box-shadow: none;
}
.note-item.pinned::before { content: none; background: none; box-shadow: none; }

/* Light: very subtle warm background to read pin status passively */
.note-item.pinned {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.22);
}
.note-item.pinned:hover {
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 0.35);
  transform: translateX(2px);
}
.note-item.pinned .note-title { color: var(--foreground); font-weight: 600; }
.note-item.pinned .note-badges svg { color: var(--amber-600); }

/* Pinned + active: keep amber active treatment unchanged */
.note-item.pinned.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.30);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.10);
}
.note-item.pinned.active .note-title { color: var(--amber-700); }

/* Dark theme — soft amber wash, no glow */
[data-theme="dark"] .note-item.pinned {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .note-item.pinned:hover {
  background: rgba(99, 102, 241, 0.13);
  border-color: rgba(99, 102, 241, 0.40);
}
[data-theme="dark"] .note-item.pinned .note-title { color: var(--foreground); }
[data-theme="dark"] .note-item.pinned .note-badges svg { color: var(--amber-400); }
[data-theme="dark"] .note-item.pinned.active {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.40);
}
[data-theme="dark"] .note-item.pinned.active .note-title { color: var(--amber-300); }

/* Disable any earlier pulse animation */
.note-item.pinned .note-badges svg:first-child { animation: none; }

/* Hover hints kept simple */
.note-action-btn[title="Pin"]:hover    { color: var(--amber-600); background: rgba(99, 102, 241, 0.10); }
.note-action-btn[title="Unpin"]:hover  { color: #ef4444; background: rgba(239, 68, 68, 0.10); }
[data-theme="dark"] .note-action-btn[title="Pin"]:hover   { color: var(--amber-400); background: rgba(99, 102, 241, 0.14); }
[data-theme="dark"] .note-action-btn[title="Unpin"]:hover { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }


/* ═══════════════════════════════════════════════════════════════
   SHARE DIALOG v2 — slug input, size pill, shorten button, spinner
   ═══════════════════════════════════════════════════════════════ */

/* Custom slug row */
.share-slug-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.share-slug-hint {
  font-weight: 400;
  color: var(--muted-foreground);
}
.share-slug-hint code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--muted);
}
.share-slug-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  margin-bottom: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.share-slug-row:focus-within {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.share-slug-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted-foreground);
  background: var(--muted);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  user-select: all;
}
.share-slug-row .input {
  flex: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  background: transparent;
  padding: 0 10px;
}
.share-slug-row .input:focus {
  box-shadow: none;
}

/* Meta row: size pill + shorten */
.share-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px 0 14px;
  flex-wrap: wrap;
}
.share-size-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--muted);
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.share-size-pill.is-ok {
  background: rgba(16, 185, 129, 0.10);
  color: var(--emerald-600);
}
.share-size-pill.is-warn {
  background: rgba(99, 102, 241, 0.12);
  color: var(--amber-700);
}
.share-size-pill.is-big {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}
.share-size-pill.is-error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.share-size-pill.is-generating {
  background: var(--muted);
  color: var(--muted-foreground);
}
.share-size-pill.is-generating::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: shareSpin 0.6s linear infinite;
}
[data-theme="dark"] .share-size-pill.is-ok   { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
[data-theme="dark"] .share-size-pill.is-warn { background: rgba(99, 102, 241, 0.16); color: var(--amber-300); }
[data-theme="dark"] .share-size-pill.is-big,
[data-theme="dark"] .share-size-pill.is-error { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

.share-shorten-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.15s;
}
.share-shorten-btn:hover:not(:disabled) {
  border-color: rgba(99, 102, 241, 0.40);
  color: var(--amber-600);
  background: rgba(99, 102, 241, 0.06);
}
.share-shorten-btn:disabled {
  opacity: 0.7;
  cursor: default;
  color: var(--emerald-600);
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
[data-theme="dark"] .share-shorten-btn:hover:not(:disabled) { color: var(--amber-300); }
[data-theme="dark"] .share-shorten-btn:disabled { color: #6ee7b7; }

.share-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: shareSpin 0.6s linear infinite;
}
@keyframes shareSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .share-spinner,
  .share-size-pill.is-generating::before { animation: none; }
}

/* Disable share targets while link is empty */
.share-action.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Share link input always shows the start of the URL */
.share-link-row .input {
  direction: ltr;
}


/* ═══════════════════════════════════════════════════════════════
   TOOLS SUITE (v2.7) — index, tool app, controls
   Pairs visually with the notepad: same tokens, same spacing, same
   amber accent. Pages live inside #app-body so they scroll without
   touching the editor experience.
   ═══════════════════════════════════════════════════════════════ */

/* ── Search bar above the index ─────────────────────────────── */
.tools-search-section { margin-top: 12px; }
.tools-search-wrapper {
  position: relative;
  max-width: 560px;
}
.tools-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
#tools-search-input {
  width: 100%;
  height: 44px;
  padding-left: 40px;
  padding-right: 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#tools-search-input:focus {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
  outline: none;
}
.tools-results-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted-foreground);
}

/* ── Categorized index grid ─────────────────────────────────── */
.tools-cat-section { margin-top: 22px; }
.tools-cat-section h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin-bottom: 12px;
}
.tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
}

.tool-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  text-decoration: none;
  color: var(--foreground);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  overflow: hidden;
}
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), transparent 60%);
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.40);
  box-shadow: 0 12px 28px -14px rgba(99, 102, 241, 0.32);
}
.tool-card:hover::before { opacity: 1; }
[data-theme="dark"] .tool-card { background: #0a0a0a; }
[data-theme="dark"] .tool-card:hover {
  box-shadow: 0 12px 30px -14px rgba(99, 102, 241, 0.45);
}

.tool-card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.10);
  color: var(--amber-600);
  transition: transform 0.18s;
}
.tool-card-icon svg { width: 22px; height: 22px; }
.tool-card:hover .tool-card-icon { transform: scale(1.06) rotate(-3deg); }
[data-theme="dark"] .tool-card-icon {
  background: rgba(99, 102, 241, 0.16);
  color: var(--amber-300);
}

.tool-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-card-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.tool-card-tagline {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.tool-card-arrow {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--muted-foreground);
  transition: transform 0.18s, color 0.18s;
}
.tool-card:hover .tool-card-arrow {
  color: var(--amber-600);
  transform: translateX(2px);
}
[data-theme="dark"] .tool-card:hover .tool-card-arrow { color: var(--amber-300); }

/* ── Single tool page hero ──────────────────────────────────── */
.tool-page .content-hero { padding-bottom: 6px; }
.tool-page .content-body { padding-top: 10px; }

/* ── Tool app (the live UI inside each tool page) ───────────── */
.tool-app {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
[data-theme="dark"] .tool-app { background: #0a0a0a; }

.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.tool-row-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .tool-row-grid { grid-template-columns: repeat(3, 1fr); }
}
.tool-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 120px;
}
.tool-field span em { color: var(--amber-600); font-style: normal; font-weight: 600; }
.tool-field-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--foreground);
  font-weight: 500;
}
.tool-field-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--amber-500);
  cursor: pointer;
}
.tool-field input[type="range"] { width: 100%; accent-color: var(--amber-500); }

.tool-button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 640px) {
  .tool-button-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .tool-button-grid { grid-template-columns: repeat(5, 1fr); }
}

.tool-pill {
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.15s;
}
.tool-pill:hover {
  border-color: rgba(99, 102, 241, 0.40);
  color: var(--amber-600);
  background: rgba(99, 102, 241, 0.06);
}
.tool-pill.is-active {
  background: linear-gradient(135deg, var(--amber-500), var(--orange-500));
  color: #0a0a0a;
  border-color: transparent;
}
[data-theme="dark"] .tool-pill { background: #0d0d0d; }
[data-theme="dark"] .tool-pill:hover { color: var(--amber-300); }

/* ── Textarea ───────────────────────────────────────────────── */
.tool-textarea-wrap { margin-bottom: 12px; }
.tool-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tool-textarea-mono {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
}
.tool-textarea:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
[data-theme="dark"] .tool-textarea { background: #050505; }

/* ── Stats grid (word counter) ──────────────────────────────── */
.tool-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (min-width: 640px) {
  .tool-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .tool-stats { grid-template-columns: repeat(7, 1fr); }
}
.tool-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border-radius: 10px;
  background: var(--background);
  border: 1px solid var(--border);
  text-align: center;
}
[data-theme="dark"] .tool-stat { background: #050505; }
.tool-stat .num {
  font-size: 18px;
  font-weight: 700;
  color: var(--amber-600);
  letter-spacing: -0.02em;
}
[data-theme="dark"] .tool-stat .num { color: var(--amber-300); }
.tool-stat span:last-child {
  font-size: 11px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Action button row ──────────────────────────────────────── */
.tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Tool status (validate / replace results) ───────────────── */
.tool-status {
  font-size: 12.5px;
  margin: 8px 0 12px;
  color: var(--muted-foreground);
  font-family: 'SFMono-Regular', Consolas, monospace;
  min-height: 18px;
}
.tool-status-ok    { color: var(--emerald-600); }
.tool-status-error { color: #dc2626; }
[data-theme="dark"] .tool-status-ok    { color: #6ee7b7; }
[data-theme="dark"] .tool-status-error { color: #fca5a5; }

/* ── Two-pane split (markdown editor) ───────────────────────── */
.tool-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 900px) {
  .tool-split { grid-template-columns: 1fr 1fr; }
}
.tool-split-pane { display: flex; flex-direction: column; gap: 6px; }
.tool-pane-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}
.tool-md-preview {
  min-height: 220px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  font-size: 14px;
  line-height: 1.7;
  color: var(--foreground);
  overflow-y: auto;
}
[data-theme="dark"] .tool-md-preview { background: #050505; }
.tool-md-preview h1 { font-size: 24px; margin: 12px 0 8px; }
.tool-md-preview h2 { font-size: 19px; margin: 10px 0 6px; }
.tool-md-preview h3 { font-size: 16px; margin: 8px 0 4px; }
.tool-md-preview p { margin: 0 0 10px; }
.tool-md-preview pre {
  background: var(--muted);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12.5px;
}
.tool-md-preview code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  background: var(--muted);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12.5px;
}
.tool-md-preview pre code { background: none; padding: 0; }
.tool-md-preview blockquote {
  border-left: 3px solid var(--amber-500);
  padding: 4px 12px;
  margin: 10px 0;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 0 8px 8px 0;
  color: var(--foreground);
}
.tool-md-preview ul, .tool-md-preview ol { padding-left: 22px; margin: 0 0 10px; }
.tool-md-preview hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.tool-md-preview a { color: var(--amber-600); }
[data-theme="dark"] .tool-md-preview a { color: var(--amber-300); }

/* ── Password generator ─────────────────────────────────────── */
.tool-pwd-display {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.tool-pwd-output {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .tool-pwd-output { background: #050505; }
.tool-pwd-refresh {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: transform 0.2s, color 0.2s, border-color 0.2s;
}
.tool-pwd-refresh:hover {
  color: var(--amber-600);
  border-color: rgba(99, 102, 241, 0.45);
  transform: rotate(90deg);
}
[data-theme="dark"] .tool-pwd-refresh:hover { color: var(--amber-300); }

.tool-pwd-strength {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tool-pwd-strength .bar {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: var(--muted);
  overflow: hidden;
}
.tool-pwd-strength .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--amber-500);
  border-radius: 9999px;
  transition: width 0.2s ease, background 0.2s ease;
}
.tool-pwd-strength #pw-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Related tools strip on each tool page ──────────────────── */
.tool-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  .tool-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tool-related-grid { grid-template-columns: repeat(3, 1fr); }
}
.tool-related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  text-decoration: none;
  color: var(--foreground);
  transition: border-color 0.15s, transform 0.15s;
}
.tool-related-card:hover {
  border-color: rgba(99, 102, 241, 0.40);
  transform: translateX(2px);
}
[data-theme="dark"] .tool-related-card { background: #0a0a0a; }
.tool-related-card .tool-card-icon { width: 32px; height: 32px; border-radius: 8px; }
.tool-related-card .tool-card-icon svg { width: 16px; height: 16px; }
.tool-related-title { display: block; font-size: 13px; font-weight: 600; }
.tool-related-cat   { display: block; font-size: 11px; color: var(--muted-foreground); }


/* ═══════════════════════════════════════════════════════════════
   TOOLS UI — POLISHED IMPROVEMENTS (v2.3)
   ═══════════════════════════════════════════════════════════════ */

/* Sticky search bar on tools index */
.tools-search-section {
	position: sticky;
	top: 0;
	z-index: 8;
	background: linear-gradient(180deg, var(--background) 60%, transparent);
	padding-top: 14px;
	margin-top: -8px;
	backdrop-filter: blur(8px);
}
.tools-search-wrapper {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
}
.tools-search-wrapper .input {
	height: 44px;
	font-size: 15px;
	padding-left: 40px;
	padding-right: 14px;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: 0 4px 14px -8px rgba(99, 102, 241, 0.18);
}
.tools-search-wrapper .input:focus {
	border-color: var(--brand-500);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.tools-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted-foreground);
	pointer-events: none;
}
.tools-results-meta {
	text-align: center;
	color: var(--muted-foreground);
	font-size: 13px;
	margin: 8px 0 0;
	min-height: 18px;
}

/* Stronger focus-visible everywhere on tool pages */
.tool-page :is(button, a, input, select, textarea):focus-visible,
.np-product-page :is(button, a):focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
	border-radius: 8px;
}

/* Tool stats — better tap target + animated count */
.tool-stat .num {
	font-variant-numeric: tabular-nums;
}

/* Bigger pills on small screens */
@media (max-width: 480px) {
	.tool-pill { padding: 10px 12px; font-size: 13px; }
	.tool-button-grid { gap: 6px; }
}

/* Action button row separator */
.tool-actions {
	padding-top: 4px;
	border-top: 1px dashed var(--border);
	margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCTS (CPT) — Affiliate cards & detail layout
   ═══════════════════════════════════════════════════════════════ */
.np-products-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.np-products-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.np-products-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.np-products-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.np-products-heading {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px;
}

.np-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--card);
	overflow: hidden;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.np-product-card:hover {
	transform: translateY(-2px);
	border-color: rgba(99, 102, 241, .35);
	box-shadow: 0 14px 34px -16px rgba(99, 102, 241, .25);
}
[data-theme="dark"] .np-product-card { background: #0a0a0a; }

.np-product-card-image {
	display: block;
	aspect-ratio: 16/10;
	background: var(--muted);
	overflow: hidden;
	position: relative;
}
.np-product-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.np-product-card:hover .np-product-card-image img { transform: scale(1.04); }
.np-product-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--muted-foreground);
	opacity: .35;
}
.np-product-card-placeholder.lg { padding: 32px; }

.np-product-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: linear-gradient(135deg, var(--brand-600), var(--brand-accent-500));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 9999px;
	box-shadow: 0 4px 14px rgba(99, 102, 241, .35);
}

.np-product-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.np-product-brand {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted-foreground);
}
.np-product-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}
.np-product-title a { color: var(--foreground); text-decoration: none; }
.np-product-title a:hover { color: var(--brand-600); }
[data-theme="dark"] .np-product-title a:hover { color: var(--brand-300); }
.np-product-excerpt {
	font-size: 13px;
	color: var(--muted-foreground);
	line-height: 1.6;
	margin: 0;
}
.np-product-card-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 6px;
}
.np-product-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--foreground);
}
.np-product-buy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--brand-500), var(--brand-accent-500));
	border-radius: 10px;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.np-product-buy:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .55);
}

/* Star rating */
.np-product-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted-foreground);
}
.np-product-rating.lg { font-size: 14px; }
.np-stars {
	display: inline-block;
	width: 88px;
	height: 16px;
	background:
		linear-gradient(90deg, #f59e0b 0 calc(var(--rating) / 5 * 100%), #d4d4d8 calc(var(--rating) / 5 * 100%) 100%);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="88" height="16" viewBox="0 0 88 16"><g fill="black"><path d="M8 0 6 5H1l4 3-1.5 5L8 10l4.5 3L11 8l4-3h-5L8 0z"/><path d="M26 0l-2 5h-5l4 3-1.5 5L26 10l4.5 3L29 8l4-3h-5L26 0z"/><path d="M44 0l-2 5h-5l4 3-1.5 5L44 10l4.5 3L47 8l4-3h-5L44 0z"/><path d="M62 0l-2 5h-5l4 3-1.5 5L62 10l4.5 3L65 8l4-3h-5L62 0z"/><path d="M80 0l-2 5h-5l4 3-1.5 5L80 10l4.5 3L83 8l4-3h-5L80 0z"/></g></svg>') 0 0 / 100% 100% no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="88" height="16" viewBox="0 0 88 16"><g fill="black"><path d="M8 0 6 5H1l4 3-1.5 5L8 10l4.5 3L11 8l4-3h-5L8 0z"/><path d="M26 0l-2 5h-5l4 3-1.5 5L26 10l4.5 3L29 8l4-3h-5L26 0z"/><path d="M44 0l-2 5h-5l4 3-1.5 5L44 10l4.5 3L47 8l4-3h-5L44 0z"/><path d="M62 0l-2 5h-5l4 3-1.5 5L62 10l4.5 3L65 8l4-3h-5L62 0z"/><path d="M80 0l-2 5h-5l4 3-1.5 5L80 10l4.5 3L83 8l4-3h-5L80 0z"/></g></svg>') 0 0 / 100% 100% no-repeat;
}
.np-rating-num { font-weight: 700; color: var(--foreground); }
.np-rating-count { color: var(--muted-foreground); }

/* Single product detail */
.np-product-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
@media (min-width: 768px) {
	.np-product-detail { grid-template-columns: 1.05fr 1fr; }
}
.np-product-detail-media {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--muted);
	aspect-ratio: 4/3;
}
.np-product-detail-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.np-product-detail-info { display: flex; flex-direction: column; gap: 14px; }
.np-product-h1 {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
}
.np-product-price-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(6, 182, 212, .06));
	border: 1px solid rgba(99, 102, 241, .18);
	border-radius: 14px;
}
.np-product-price-value {
	font-size: 24px;
	font-weight: 800;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.np-product-buy-lg {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	border-radius: 12px;
	text-decoration: none;
}
.np-product-disclosure {
	font-size: 12px;
	color: var(--muted-foreground);
	margin: 0;
}
.np-proscons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 640px) {
	.np-proscons { grid-template-columns: 1fr 1fr; }
}
.np-pros, .np-cons {
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--border);
}
.np-pros { background: rgba(16, 185, 129, .06); border-color: rgba(16, 185, 129, .18); }
.np-cons { background: rgba(239, 68, 68, .05);  border-color: rgba(239, 68, 68, .15);  }
.np-pros h2, .np-cons h2 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.np-pros ul, .np-cons ul { margin: 0; padding-left: 18px; }
.np-pros li, .np-cons li { font-size: 13.5px; line-height: 1.55; margin-bottom: 4px; }

/* Product archive pagination */
.np-pagination ul {
	display: flex; gap: 6px; flex-wrap: wrap;
	list-style: none; padding: 0; margin: 24px 0 0;
	justify-content: center;
}
.np-pagination ul li a, .np-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 10px;
	border: 1px solid var(--border); border-radius: 8px;
	font-size: 13px; text-decoration: none; color: var(--foreground);
	transition: all .15s;
}
.np-pagination ul li a:hover { background: var(--accent); }
.np-pagination ul li .current {
	background: var(--brand-500); color: #fff; border-color: var(--brand-500);
}


/* ═══════════════════════════════════════════════════════════════
   BLOG → FEATURED PRODUCTS STRIP
   ═══════════════════════════════════════════════════════════════ */
.blog-products-strip {
	margin-top: 36px;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background:
		radial-gradient(1200px 240px at 0% 0%, rgba(99, 102, 241, .06), transparent 60%),
		radial-gradient(800px 200px at 100% 100%, rgba(6, 182, 212, .05), transparent 60%),
		var(--card);
}
[data-theme="dark"] .blog-products-strip {
	background:
		radial-gradient(1200px 240px at 0% 0%, rgba(99, 102, 241, .12), transparent 60%),
		radial-gradient(800px 200px at 100% 100%, rgba(6, 182, 212, .08), transparent 60%),
		#0a0a0a;
}
.blog-products-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.blog-products-eyebrow {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 9999px;
	background: rgba(99, 102, 241, .10);
	color: var(--brand-600);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 8px;
}
[data-theme="dark"] .blog-products-eyebrow { color: var(--brand-300); }
.blog-products-head h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.blog-products-desc {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--muted-foreground);
}
.blog-products-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--brand-600);
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid rgba(99, 102, 241, .25);
	transition: all .15s;
}
.blog-products-more:hover {
	background: rgba(99, 102, 241, .08);
	transform: translateX(2px);
}
[data-theme="dark"] .blog-products-more { color: var(--brand-300); border-color: rgba(99, 102, 241, .35); }

/* Single-post related products */
.single-post-products {
	max-width: 768px;
	margin: 28px auto 0;
	padding: 24px;
	border-top: 1px solid var(--border);
}
.single-post-products h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE SEO CONTENT BLOCK (additive — does not affect the editor)
   Rendered by inc/seo-landing.php → notepad_seo_homepage_block()
   It lives outside #app-shell, off-screen by default to crawlers /
   screen readers; site users can reach it via the "Skip to content"
   link or by tabbing through to keep the editor experience clean.
   ═══════════════════════════════════════════════════════════════ */
#seo-content {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: normal;
}
/* Reveal when explicitly focused (e.g. Skip-to-content link points here)
   Note: editor users still see the same UI; only assistive tech
   navigation surfaces this block. */
#seo-content:target,
#seo-content:focus,
#seo-content:focus-within {
	position: static;
	left: auto;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	max-width: 800px;
	margin: 32px auto;
	padding: 24px;
	background: var(--background);
	border-top: 1px solid var(--border);
}
.seo-block-head .seo-eyebrow {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 9999px;
	background: rgba(99, 102, 241, .10);
	color: var(--brand-600);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
[data-theme="dark"] .seo-block-head .seo-eyebrow { color: var(--brand-300); }
.seo-block-head h2 {
	margin: 8px 0 6px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
}
.seo-block-head .seo-lead {
	color: var(--muted-foreground);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 18px;
}
.seo-section { margin-top: 24px; }
.seo-section h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.seo-section p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }
.seo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) { .seo-grid { grid-template-columns: 1fr 1fr; } }
.seo-grid li {
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: rgba(99, 102, 241, .04);
	font-size: 14px;
	line-height: 1.55;
}
.seo-list { margin: 0; padding-left: 22px; }
.seo-list li { font-size: 14.5px; line-height: 1.7; margin-bottom: 4px; }

.seo-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.seo-related a {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--foreground);
	text-decoration: none;
	font-size: 13.5px;
}
.seo-related a:hover { border-color: var(--brand-500); color: var(--brand-600); }

/* Landing CTA row */
.seo-cta-row {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

/* Single-post related posts strip (added via the_content filter) */
.single-post-related {
	margin-top: 32px;
	padding: 18px 20px;
	border-top: 1px solid var(--border);
	background: rgba(99, 102, 241, .04);
	border-radius: 12px;
}
.single-post-related h2 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
}
.single-post-related ul {
	margin: 0;
	padding-left: 20px;
}
.single-post-related li {
	font-size: 14px;
	margin-bottom: 4px;
}
.single-post-related a {
	color: var(--brand-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}
[data-theme="dark"] .single-post-related a { color: var(--brand-300); }
.single-post-related-cta {
	margin-top: 12px;
	font-size: 13px;
	color: var(--muted-foreground);
}
.single-post-related-cta a { color: var(--foreground); text-decoration: none; font-weight: 600; }
.single-post-related-cta a:hover { color: var(--brand-600); }


/* Reading time pill on single articles (notepad_blog + post) */
.np-reading-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--brand-600);
	background: rgba(99, 102, 241, .08);
	padding: 4px 10px;
	border-radius: 9999px;
	margin: 0 0 12px;
}
[data-theme="dark"] .np-reading-time { color: var(--brand-300); }


/* ═══════════════════════════════════════════════════════════════
   MOBILE UI HARDENING — Tools section + content pages (v2.6)
   Fixes:
   • Horizontal overflow on small screens (long URLs / code)
   • Tool cards overflowing on 320px viewports
   • Touch targets below 44px (WCAG AAA)
   • Sticky tools-search-section jitter on iOS
   • Two-column tool-button-grid pinching on 360px
   ═══════════════════════════════════════════════════════════════ */

/* Prevent any container from forcing horizontal scroll on mobile */
@media (max-width: 767px) {
	html, body { max-width: 100%; overflow-x: hidden; }
	.content-page,
	.content-body,
	.content-section,
	.tool-app,
	.tools-grid,
	.tools-cat-section,
	.tools-search-section,
	.np-products-grid,
	.blog-products-strip {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Long URLs / code in tool bodies must wrap, never scroll the page */
	.content-section,
	.tool-app,
	.tool-md-preview,
	.single-post-content {
		overflow-wrap: anywhere;
		word-wrap: break-word;
	}

	/* Content body — tighter side padding on phones */
	.content-body { padding: 12px 14px 24px; }
	.content-hero { padding: 18px 14px 6px; }
	.content-breadcrumbs { padding: 10px 14px 0; font-size: 11px; }

	/* Tools grid — single column with full-width cards */
	.tools-grid { gap: 10px; }
	.tool-card {
		padding: 14px;
		gap: 12px;
		border-radius: 12px;
		min-height: 64px; /* touch-friendly */
	}
	.tool-card-icon { width: 40px; height: 40px; }
	.tool-card-icon svg { width: 20px; height: 20px; }
	.tool-card-title { font-size: 15px; }
	.tool-card-tagline {
		font-size: 12.5px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.tool-card-arrow { display: none; } /* the entire card is the link, arrow is decorative */

	/* Sticky search bar — disable on mobile to prevent iOS scroll jitter */
	.tools-search-section {
		position: static;
		padding-top: 4px;
	}
	.tools-search-wrapper .input { height: 46px; font-size: 15px; }

	/* Tools index category headings */
	.tools-cat-section h2 {
		font-size: 12px;
		margin: 4px 0 10px;
	}

	/* Tool pages — toolbar pills become 44px tall, stay 2-column,
	   never break out of the viewport */
	.tool-button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tool-pill {
		min-height: 44px;
		padding: 10px 12px;
		font-size: 13px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 1.25;
		white-space: normal;
	}

	/* Tool row fields stack on mobile so labels don't overlap */
	.tool-row { gap: 8px; }
	.tool-row-grid { grid-template-columns: 1fr; gap: 8px; }
	.tool-field {
		min-width: 0;
		flex: 1 1 100%;
	}
	.tool-field-check {
		flex-direction: row;
		min-height: 44px;
	}

	/* Action button row — wrap & full width on small phones */
	.tool-actions {
		gap: 6px;
	}
	.tool-actions .btn {
		flex: 1 1 calc(50% - 6px);
		min-height: 40px;
		justify-content: center;
	}

	/* Text-area / preview — fit viewport */
	.tool-textarea,
	.tool-md-preview {
		min-height: 180px;
		padding: 12px;
		font-size: 14px;
	}

	/* Stats grid (word counter, hash) — 2 columns max on phones */
	.tool-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
	.tool-stat { padding: 10px 8px; }
	.tool-stat .num { font-size: 16px; word-break: break-all; }

	/* Split editor (markdown / diff) — stack vertically */
	.tool-split { grid-template-columns: 1fr; gap: 10px; }

	/* Password generator — inputs full width */
	.tool-pwd-display {
		flex-direction: column;
		gap: 8px;
	}
	.tool-pwd-output {
		width: 100%;
		font-size: 16px;
	}
	.tool-pwd-refresh,
	.tool-pwd-display .btn {
		width: 100%;
		min-height: 44px;
	}

	/* Related tool cards — stack */
	.tool-related-grid { grid-template-columns: 1fr; }

	/* Tools index search input — full bleed */
	.tools-search-wrapper { max-width: 100%; }

	/* Tab bar — let the 4 tabs scroll horizontally if they don't fit
	   instead of breaking the viewport */
	#tab-bar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#tab-bar::-webkit-scrollbar { display: none; }
	.tab-btn {
		flex-shrink: 0;
		padding: 8px 10px;
		font-size: 12px;
	}
}

/* Small phones (≤380px) — extra tight spacing */
@media (max-width: 380px) {
	.tool-card { padding: 12px; gap: 10px; }
	.tool-card-title { font-size: 14px; }
	.tool-card-tagline { font-size: 12px; }
	.tool-button-grid { grid-template-columns: 1fr; }
	.tool-actions .btn { flex: 1 1 100%; }
	.content-title { font-size: 22px; }
	.content-subtitle { font-size: 14px; }
}

/* Pointer-coarse touch targets — guarantee 44px on real touch devices
   regardless of viewport width (covers tablets in landscape too) */
@media (pointer: coarse) {
	.tool-pill,
	.tool-card,
	.tool-related-card,
	.btn-sm,
	.np-product-buy {
		min-height: 44px;
	}
	.tool-card { padding-block: 14px; }
}


/* ═══════════════════════════════════════════════════════════════
   FINAL MOBILE HARDENING + CWV (v2.7)
   ═══════════════════════════════════════════════════════════════ */

/* Dropdowns and popovers must never exceed the viewport on phones */
@media (max-width: 767px) {
	.dropdown-menu,
	.heading-dropdown,
	.link-input-popover {
		max-width: calc(100vw - 24px);
		width: auto;
		min-width: 180px;
	}
	/* Toolbar selects shouldn't squeeze under 70px even on tiny phones */
	.toolbar-select { max-width: 100%; }
	/* Sidebar dialogs already use width: calc(100% - 32px) — ok */

	/* Block-level box-sizing safety net for ANY child of content body */
	.content-body * {
		box-sizing: border-box;
	}

	/* Reading-time pill — wrap on tiny phones */
	.np-reading-time { max-width: 100%; }

	/* Single-post-related-cta — break long links cleanly */
	.single-post-related-cta { word-break: break-word; }

	/* Tools index cards — don't shrink the icon below readable size */
	.tool-card-icon { min-width: 40px; }
}

/* CLS protection — reserve a min height for the off-screen SEO block
   so the document height is stable when crawlers force expansion */
.seo-content { contain: layout paint; }

/* Font rendering — system stack is already used via :root font-family.
   We only enforce font-display: swap as a safety against any future
   web fonts. */
@font-face {
	font-family: 'system-ui-fallback';
	font-style: normal;
	font-weight: 400 700;
	src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
	font-display: swap;
}

/* Reduce paint cost for very long lists in the editor sidebar — no
   functional change, just paint hint. */
.notes-list .note-item { content-visibility: auto; }

/* Prevent layout shift on the homepage SEO content block when a
   search engine crawler "expands" it via :target. */
#seo-content[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   MOBILE RENDERING HARDENING (v2.9) — /tools/ index + content pages
   ───────────────────────────────────────────────────────────────
   Targets only `body:not(.is-notepad-app)` so the homepage editor
   (which intentionally locks the viewport) is 100% unchanged.

   Fixes audited from production:
   • iOS Safari URL-bar jitter caused by `height:100vh` reflow loops
     (visible as continuous blinking/flicker) → uses 100dvh + safe
     fallback, drops overflow:hidden & layout containment on
     non-editor pages.
   • Broken / freezing scroll on phones caused by stacked
     overflow:hidden ancestors → unlocks scroll on the document root
     for content pages and re-enables smooth touch scrolling.
   • Horizontal overflow from `width:100vw` colliding with the
     scrollbar gutter → switches non-editor pages to 100% width.
   • `:hover` translate effects sticking on tap → suppressed on
     pointer:coarse so cards no longer flicker after a tap.
   • Sticky tools-search-section re-layering on iOS → made
     non-sticky on touch and blur removed (already partly handled,
     reinforced here with !important to defeat earlier rules).
   • Safe-area-inset support for notch / Dynamic Island devices.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Stable viewport height + no horizontal overflow on content pages */
body:not(.is-notepad-app) {
	overflow-x: hidden;       /* hard-cap horizontal scroll */
	overflow-y: auto;         /* keep vertical scroll alive */
	height: auto;
	min-height: 100vh;        /* legacy fallback */
	width: 100%;              /* not 100vw — avoid scrollbar overflow */
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: auto; /* let the page scroll naturally */
}

/* Use the small-viewport unit when supported so iOS URL-bar
   show/hide does NOT trigger a relayout. */
@supports (min-height: 100svh) {
	body:not(.is-notepad-app) { min-height: 100svh; }
}

body:not(.is-notepad-app) #app-shell {
	height: auto;
	min-height: 100vh;
	width: 100%;
	max-width: 100%;
	overflow: visible;        /* unlock vertical scroll for content pages */
	contain: none;            /* drop layout/paint containment that breaks scroll & paints */
}

@supports (min-height: 100svh) {
	body:not(.is-notepad-app) #app-shell { min-height: 100svh; }
}

body:not(.is-notepad-app) #app-body {
	display: block;           /* no flex centering needed — content pages own their own layout */
	min-height: 0;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

/* The .content-page wrapper used to be the scroll container with
   its own overflow-y:auto. On mobile that creates nested scrolls
   (page + container) which iOS resolves badly → freeze. Let the
   document own the scroll on phones. */
@media (max-width: 1023px) {
	body:not(.is-notepad-app) .content-page {
		overflow: visible;
		-webkit-overflow-scrolling: auto;
		min-height: 0;
	}
}

/* 2. Safe-area insets so the layout never sits under the iOS notch
   or the Android gesture bar (we declared viewport-fit=cover in
   header.php). */
body:not(.is-notepad-app) #app-shell {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}
@supports (padding: max(0px)) {
	body:not(.is-notepad-app) .content-footer-cta {
		padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
	}
}

/* 3. Kill stuck-hover on touch devices (root cause of post-tap
   flicker on tool cards / related cards / blog cards). */
@media (hover: none), (pointer: coarse) {
	.tool-card:hover,
	.tool-related-card:hover,
	.blog-card:hover,
	.content-tile:hover,
	.faq-item:hover {
		transform: none !important;
		box-shadow: none !important;
		border-color: var(--border) !important;
	}
	.tool-card:hover::before { opacity: 0 !important; }
	.tool-card:hover .tool-card-icon { transform: none !important; }
	.tool-card:hover .tool-card-arrow { transform: none !important; }
}

/* 4. Drop blanket will-change on touch — it forces every card onto
   its own GPU layer, which on iOS causes flickering during momentum
   scroll. Keep it for desktop where it actually helps. */
@media (hover: none), (pointer: coarse) {
	.blog-card,
	.note-item,
	.tool-btn,
	.tool-card,
	.tool-related-card {
		will-change: auto;
	}
}

/* 5. Sticky tools-search-section + backdrop-filter is the #1 source
   of the visible "blinking" on iOS. The earlier media query already
   tried to disable it; reinforce here with !important so any later
   override can't bring it back, and drop the blur which by itself
   triggers per-frame repaint while scrolling. */
@media (max-width: 767px) {
	.tools-search-section {
		position: static !important;
		top: auto !important;
		z-index: auto !important;
		background: transparent !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		padding-top: 4px;
	}
}

/* 6. Tab bar — when it horizontally scrolls on phones, it can
   absorb vertical-swipe gestures and freeze the page. Constrain
   touch-action so vertical pans always reach the document. */
@media (max-width: 767px) {
	#tab-bar {
		touch-action: pan-x;
		overscroll-behavior-x: contain;
	}
	.tab-btn { touch-action: manipulation; }
}

/* 7. Defensive guard against any descendant of a content page
   forcing horizontal overflow (long URLs, code, ad iframes). */
@media (max-width: 767px) {
	body:not(.is-notepad-app) .content-page,
	body:not(.is-notepad-app) .content-page * {
		max-width: 100%;
	}
	body:not(.is-notepad-app) .content-page img,
	body:not(.is-notepad-app) .content-page iframe,
	body:not(.is-notepad-app) .content-page video,
	body:not(.is-notepad-app) .notepad-ad,
	body:not(.is-notepad-app) .notepad-ad ins {
		max-width: 100% !important;
		height: auto;
	}
}

/* 8. Remove the smooth-scroll animation on phones — combined with
   sticky/blur/translate it produced visible flicker after taps on
   in-page anchors. Desktop keeps the smooth behavior. */
@media (max-width: 767px) {
	html { scroll-behavior: auto; }
}

/* 9. Tool cards: switch from will-change:transform to a single
   composited transform on tap so we don't keep a layer alive
   permanently. Visual identical on desktop. */
@media (hover: hover) and (pointer: fine) {
	.tool-card { will-change: transform; }
}

/* 10. Honor reduced-motion users: drop transforms entirely. */
@media (prefers-reduced-motion: reduce) {
	.tool-card,
	.tool-related-card,
	.tool-card-icon,
	.tool-card-arrow,
	.content-tile,
	.blog-card {
		transition: none !important;
		transform: none !important;
	}
}

/* 11. Fluid type for hero / titles using clamp() so text never
   overflows on 320px screens and never looks tiny on 768px+. */
.content-title {
	font-size: clamp(22px, 4.6vw + 8px, 36px);
}
.content-subtitle {
	font-size: clamp(14px, 0.6vw + 12px, 16px);
}
.content-section h2 {
	font-size: clamp(18px, 1vw + 14px, 22px);
}
.tool-card-title {
	font-size: clamp(14px, 0.4vw + 12.5px, 15.5px);
}
.tool-card-tagline {
	font-size: clamp(12px, 0.2vw + 11.5px, 13px);
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE GPU & PAINT HARDENING (v2.10) — Android Chrome tearing fix
   ───────────────────────────────────────────────────────────────
   Targets specific compositor patterns that produce tearing,
   ghosting, horizontal artifact lines and "duplicated" rendering
   on Android Chrome and low-power phones. All rules are scoped to
   touch/coarse pointer or `body:not(.is-notepad-app)` so the
   homepage editor is byte-for-byte unchanged on desktop.

   Strategy:
   • Demote unnecessary GPU layers (drop will-change on touch)
   • Eliminate backdrop-filter + sticky combination on touch (the
     #1 source of horizontal tearing lines on Android Chrome)
   • Stop infinite paint animations on touch (shimmer)
   • Drop layout-containment that interacts badly with momentum
     scroll on non-editor pages
   • Force `pan-y` on the document so horizontal scrollers can
     never absorb vertical gestures
   ═══════════════════════════════════════════════════════════════ */

/* 1. Document-level touch behaviour — guarantees the document
   always handles vertical pans, regardless of any inner
   horizontal scroller (#tab-bar, ad iframes, code blocks). */
@media (hover: none), (pointer: coarse) {
	html, body {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: none;
	}
	body:not(.is-notepad-app) {
		touch-action: pan-y;
	}
}

/* 2. Kill backdrop-filter on the tools search bar on every touch
   device and every viewport ≤1023px. The earlier rule only
   handled ≤767px which left tablets and large phones in landscape
   exposed. Sticky + blur + translucent gradient is the canonical
   Android-Chrome tearing pattern. */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
	.tools-search-section {
		position: static !important;
		top: auto !important;
		z-index: auto !important;
		background: var(--background) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		margin-top: 0 !important;
	}
}

/* 3. Drop sidebar backdrop-filter on touch — only the editor uses
   it and the gradient layer flickers on Android Chrome the moment
   any sibling repaints. */
@media (hover: none), (pointer: coarse) {
	#sidebar,
	[data-theme="dark"] #sidebar {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* 4. Disable the infinite shimmer paint loop on touch. It's a
   loading hint that's invisible the second an <img> renders, but
   on slow networks Android Chrome composites it for the full life
   of the page → continuous repaint = flicker. Show a flat tone
   instead. */
@media (hover: none), (pointer: coarse) {
	.blog-card-img,
	.single-post-featured {
		animation: none !important;
		background: var(--muted) !important;
	}
}

/* Also stop the same shimmer when the user has reduced-motion on
   any device (we already had partial coverage; reinforce). */
@media (prefers-reduced-motion: reduce) {
	.blog-card-img,
	.single-post-featured,
	.skeleton {
		animation: none !important;
	}
}

/* 5. Demote GPU layers on touch — `will-change` is a hint, not a
   command, but Chromium honors it strictly. Removing it across
   cards collapses dozens of composite layers into one, which
   eliminates the "ghost duplicated rendering" seen in the
   screenshot. */
@media (hover: none), (pointer: coarse) {
	.blog-card,
	.note-item,
	.tool-btn,
	.tool-card,
	.tool-related-card,
	#sidebar,
	#editor-content {
		will-change: auto !important;
	}
}

/* 6. Drop layout/paint containment on non-editor pages. Containment
   is great when the layout is fixed (the editor) but on a
   normally-scrolling content page Android Chrome can clip the
   wrong region during momentum scroll → visible horizontal tear
   lines. */
body:not(.is-notepad-app) #app-shell {
	contain: none !important;
}
body:not(.is-notepad-app) #editor-content,
body:not(.is-notepad-app) .seo-content {
	contain: none !important;
	will-change: auto !important;
}

/* 7. Card transitions on touch — keep them short and use
   color/border only (no transform). Transforms on tap are the
   source of the "stuck hover" ghost outline some users see. */
@media (hover: none), (pointer: coarse) {
	.tool-card,
	.tool-related-card,
	.blog-card,
	.content-tile,
	.faq-item {
		transition: border-color 0.15s ease, background-color 0.15s ease;
		transform: none !important;
	}
	.tool-card::before { display: none !important; }
}

/* 8. Active state: replace hover lift with a subtle background
   shift so taps still feel responsive without promoting a layer. */
@media (hover: none), (pointer: coarse) {
	.tool-card:active,
	.tool-related-card:active {
		background: rgba(99, 102, 241, 0.06);
	}
	[data-theme="dark"] .tool-card:active,
	[data-theme="dark"] .tool-related-card:active {
		background: rgba(99, 102, 241, 0.10);
	}
}

/* 9. Tap highlight — let Chrome show its native highlight (faster
   than a CSS transition) and remove the tap-color flash that
   conflicts with our :active styles. */
* {
	-webkit-tap-highlight-color: transparent;
}

/* 10. Font smoothing — Android Chrome sub-pixel rendering on
   transformed/composited layers produces the visible "horizontal
   lines" artifact. Pinning to grayscale on touch eliminates it
   without affecting desktop crispness. */
@media (hover: none), (pointer: coarse) {
	body:not(.is-notepad-app) {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeSpeed;
	}
}

/* 11. Ad iframes — Android Chrome composites cross-origin iframes
   on their own layer; if the parent has `transform` ancestors the
   iframe paints at a sub-pixel offset = ghost text. Force exact
   pixel alignment. */
.notepad-ad,
.notepad-ad ins,
.notepad-ad iframe {
	transform: none !important;
	will-change: auto !important;
}

/* 12. Toast container is `position: fixed` and uses transitions
   to slide. On Android Chrome it can leave a paint residue when
   it animates out. Hint a tighter compositing scope. */
#toast-container {
	pointer-events: none;
	contain: layout;
}
#toast-container > * { pointer-events: auto; }

/* 13. Fluid container for tool cards — `min-width:0` everywhere
   the grid auto-track meets a flex child, so card content can
   never push the row wider than the viewport (a common Android
   trigger for horizontal-line artifacts during overflow scroll). */
.tools-grid > .tool-card,
.tool-related-grid > .tool-related-card {
	min-width: 0;
}
.tool-card-body,
.tool-card-title,
.tool-card-tagline {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* 14. Last-line defence: cap any descendant of #content-page from
   forcing horizontal scroll on phones. */
@media (max-width: 767px) {
	#content-page,
	#content-page * {
		max-width: 100% !important;
		min-width: 0 !important;
	}
	#content-page pre,
	#content-page code,
	#content-page table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* 15. Defeat the sticky search bar `margin-top: -8px` on touch —
   that negative margin combined with `position:sticky` was
   pulling the search wrapper above its parent's border, creating
   the visible 1px artifact line on scroll. */
@media (hover: none), (pointer: coarse) {
	.tools-search-section { margin-top: 0 !important; padding-top: 8px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SEO trust-signal row (homepage indexable block)
   ═══════════════════════════════════════════════════════════════ */
.seo-trust-row {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}
.seo-trust-row li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background: rgba(99, 102, 241, 0.06);
	font-size: 12.5px;
	color: var(--foreground);
	white-space: nowrap;
}
[data-theme="dark"] .seo-trust-row li {
	background: rgba(99, 102, 241, 0.12);
	color: var(--foreground);
}
@media (max-width: 480px) {
	.seo-trust-row li { font-size: 12px; padding: 5px 9px; }
}


/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE FOOTER (non-editor pages only)
   The front-page editor keeps its original locked viewport — this
   footer is rendered only when body is NOT .is-notepad-app, see
   footer.php conditional.
   ═══════════════════════════════════════════════════════════════ */
#site-footer {
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid var(--border);
	background: var(--background);
	padding: 28px 20px 24px;
	margin-top: 24px;
}
.site-footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	text-align: center;
}
.site-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	font-size: 13.5px;
}
.site-footer-nav a {
	color: var(--foreground);
	text-decoration: none;
	padding: 4px 2px;
	border-bottom: 1px dotted transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.site-footer-nav a:hover {
	color: var(--amber-600);
	border-bottom-color: currentColor;
}
[data-theme="dark"] .site-footer-nav a:hover { color: var(--amber-400); }

.site-footer-copy {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted-foreground);
	max-width: 640px;
}

@media (max-width: 480px) {
	#site-footer { padding: 22px 14px 20px; }
	.site-footer-nav { gap: 4px 14px; font-size: 13px; }
	.site-footer-copy { font-size: 12px; }
}

/* Touch — no transform/will-change on the footer to keep the
   compositor cheap on phones. */
@media (hover: none), (pointer: coarse) {
	.site-footer-nav a { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM LOGO — Eye Blink, Wink & Mouse Follow
   ═══════════════════════════════════════════════════════════════ */
@keyframes logoEyeBlink {
  0%, 88%, 100% { transform: scaleY(1) translateY(0); }
  93% { transform: scaleY(0.08) translateY(0.4px); }
}
@keyframes logoEyeWink {
  0%, 80%, 100% { transform: scaleY(1); }
  86% { transform: scaleY(0.08); }
}
#navbar .logo-icon svg circle.le-l,
#navbar .logo-icon svg circle.lp-l {
  animation: logoEyeBlink var(--blink-dur, 6s) ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s);
  transform-origin: center;
}
#navbar .logo-icon svg circle.le-r,
#navbar .logo-icon svg circle.lp-r {
  animation: logoEyeBlink var(--blink-dur, 6s) ease-in-out infinite 0.12s,
             logoEyeWink 10s ease-in-out infinite 1.5s;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  #navbar .logo-icon svg circle, .logo-eye, .logo-pupil { animation: none !important; transition: none !important; }
}
@media (hover: none) and (pointer: coarse) {
  .lp-l, .lp-r { transition: none !important; }
}