/* Razzle — shared styles (follows DESIGN.md) */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Caveat:wght@500;600;700&family=Luckiest+Guy&display=swap');

:root {
  --bg: #ede0cf;
  --bg-warm: #e5d5c3;
  --bg-card: #f7efe5;
  --bg-ink: #1a110a;

  --ink: #2d1f14;
  --ink-medium: #5c4a3d;
  --ink-light: #8a7565;
  --ink-faint: #c4b5a5;

  --orange: #d97757;
  --orange-light: #f7e4d8;
  --yellow: #ffc857;
  --yellow-light: #f5eacc;
  --green: #2ec4b6;
  --green-light: #d9efec;
  --blue: #5b7fff;
  --blue-light: #dde4f7;
  --red: #e63946;
  --red-light: #f2d5d8;
  --purple: #8b5cf6;
  --purple-light: #e5dcf7;

  --pos-qb: #5b7fff;
  --pos-rb: #2ec4b6;
  --pos-wr: #d97757;
  --pos-te: #8b5cf6;

  --font-display: 'Garfield', 'Luckiest Guy', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-hand: 'Caveat', cursive;

  --radius: 12px;
  --shadow-chunky: 4px 4px 0 var(--ink);
}

/* ===== DARK MODE — Espresso flip ===== */
[data-theme="dark"] {
  --bg: #2d1f14;
  --bg-warm: #3b2821;
  --bg-card: #4a3728;
  --bg-ink: #1a110a;

  --ink: #ede0cf;
  --ink-medium: #c4b5a5;
  --ink-light: #8a7565;
  --ink-faint: #5c4a3d;

  --orange-light: #5c3325;
  --yellow-light: #4a3a1e;
  --green-light: #1a3a36;
  --blue-light: #2a3350;
  --red-light: #4a1a1e;
  --purple-light: #352450;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ===== NAV ===== */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--bg);
  border-bottom: 3px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
  line-height: 1;
}

.logo-text {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
}

.logo-text .accent { color: var(--orange); }

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: all 0.15s;
  white-space: nowrap;
}

.nav-links a:hover {
  border-color: var(--ink);
  background: var(--bg-card);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.nav-links a.active {
  border-color: var(--ink);
  background: var(--orange);
  color: white;
  box-shadow: 2px 2px 0 var(--ink);
}

/* ===== NAV AUTH & SEARCH HINT ===== */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-sm {
  font-size: 11px !important;
  padding: 4px 10px !important;
}

.nav-search-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-light);
  padding: 3px 8px;
  border: 2px solid var(--ink-faint);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.nav-search-hint:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-card);
}

.nav-search-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-warm);
  border: 2px solid var(--ink-faint);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 4px;
}

/* ===== AUTH UI ===== */
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.nav-user-name {
  color: var(--ink);
  font-weight: 700;
}

.nav-plan-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1.5px solid;
}

.nav-plan-free {
  color: var(--ink-light);
  border-color: var(--ink-faint);
  background: var(--bg);
}

.nav-plan-pro {
  color: white;
  border-color: var(--orange);
  background: var(--orange);
}

.nav-signout {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink-light) !important;
  text-decoration: underline !important;
  padding: 0 !important;
  border: none !important;
}

.nav-signout:hover {
  color: var(--red) !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 31, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.auth-modal {
  background: var(--bg-card);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 32px;
  width: 380px;
  max-width: 92vw;
  position: relative;
}

.auth-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink-light);
  line-height: 1;
}

.auth-modal-close:hover { color: var(--ink); }

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}

.auth-tab {
  flex: 1;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 0;
  border: none;
  cursor: pointer;
  background: var(--bg);
  color: var(--ink-light);
  transition: all 0.15s;
}

.auth-tab.active {
  background: var(--orange);
  color: white;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form input {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
}

.auth-form input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange-light);
}

.auth-error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
  min-height: 16px;
}

.auth-submit {
  margin-top: 4px;
  width: 100%;
  text-align: center;
  font-size: 14px !important;
  padding: 10px !important;
}

/* ===== BUTTONS ===== */
.btn-chunky {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: all 0.12s;
}

.btn-chunky:hover {
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.btn-chunky.active {
  background: var(--ink);
  color: white;
}

.btn-primary {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--orange);
  color: white;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: all 0.12s;
}

.btn-primary:hover {
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

/* ===== CHIPS / BADGES ===== */
.chip {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.12s;
  background: var(--bg-card);
}

.chip:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
.chip.active { color: white; }
.chip.active[data-pos="QB"] { background: var(--pos-qb); }
.chip.active[data-pos="RB"] { background: var(--pos-rb); }
.chip.active[data-pos="WR"] { background: var(--pos-wr); }
.chip.active[data-pos="TE"] { background: var(--pos-te); }
.chip.active[data-pos="ALL"] { background: var(--ink); }

/* ===== LOADING ===== */
.loading-msg {
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--ink-medium);
  text-align: center;
  padding: 30px 20px;
}
.skeleton-table {
  max-width: 900px;
  margin: 0 auto;
}
.skeleton-row {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
}
.skeleton-row.skeleton-header {
  border-bottom: 2px solid var(--border-light, rgba(0,0,0,0.1));
}
.skeleton-cell {
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.06) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-header .skeleton-cell {
  height: 12px;
  opacity: 0.6;
}
.skeleton-row:nth-child(odd) .skeleton-cell {
  animation-delay: 0.15s;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== SEARCH HIGHLIGHT ===== */
.search-hl {
  background: rgba(217, 119, 87, 0.25);
  padding: 0 1px;
  border-radius: 2px;
  color: inherit;
}

/* ===== ERROR STATE ===== */
.error-msg {
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--red);
  text-align: center;
  padding: 40px 20px;
}

/* ===== EMPTY STATE ===== */
.empty-msg {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--ink-light);
  text-align: center;
  padding: 40px 20px;
}


/* ===== INPUTS ===== */
.input-chunky {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  outline: none;
  transition: box-shadow 0.12s;
}

.input-chunky:focus {
  box-shadow: 3px 3px 0 var(--ink);
}

.input-chunky::placeholder {
  color: var(--ink-light);
  font-family: var(--font-hand);
  font-size: 15px;
}

/* ===== SELECT ===== */
.select-chunky {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
  outline: none;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Nav */
  .topnav {
    padding: 8px 12px;
  }
  .logo-mark {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .logo-text {
    font-size: 16px;
  }
  .nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-size: 11px;
    padding: 4px 8px;
  }
  .nav-user { gap: 6px; font-size: 11px; }
  .auth-modal { padding: 24px; width: 340px; }

  /* Buttons & chips */
  .btn-chunky, .btn-primary {
    font-size: 11px;
    padding: 5px 10px;
  }
  .chip {
    font-size: 10px;
    padding: 2px 7px;
  }
}

@media (max-width: 480px) {
  .topnav {
    padding: 6px 8px;
    gap: 4px;
  }
  .logo-text {
    font-size: 14px;
  }
  .nav-links {
    gap: 2px;
  }
  .nav-links a {
    font-size: 10px;
    padding: 3px 6px;
  }
  .nav-user-name { display: none; }
  .nav-signout { font-size: 10px !important; }
  /* Command Palette — mobile friendly */
  .cmd-palette-backdrop {
    padding-top: 10vh;
  }
  .cmd-palette {
    max-width: 96vw;
  }
  .cmd-palette-input {
    font-size: 16px;
  }
  .cmd-palette-hint {
    display: none;
  }
  /* Auth Modal — compact on phones */
  .auth-modal {
    padding: 20px;
    width: 95vw;
  }
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  background: none;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.15s;
  box-shadow: 2px 2px 0 var(--ink);
}

.theme-toggle:hover {
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

/* Dark mode transition */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== Command Palette (Ctrl+K) ========== */
.cmd-palette-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(45, 31, 20, 0.45);
  backdrop-filter: blur(4px);
  z-index: 9000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.cmd-palette-backdrop.open {
  display: flex;
}
.cmd-palette {
  width: 480px;
  max-width: 92vw;
  background: var(--bg-card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}
.cmd-palette-label {
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--ink-light);
  padding: 10px 16px 0;
}
.cmd-palette-input-wrap {
  padding: 8px 16px 12px;
  border-bottom: 2px dashed var(--ink-faint);
}
.cmd-palette-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 18px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
}
.cmd-palette-input:focus {
  border-color: var(--orange);
}
.cmd-palette-input::placeholder {
  color: var(--ink-light);
  font-family: var(--font-display);
}
.cmd-palette-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 0;
}
.cmd-palette-status {
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--ink-light);
  text-align: center;
  padding: 20px 16px;
}
.cmd-palette-section {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-light);
  padding: 8px 16px 4px;
}
.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background 0.1s;
}
.cmd-palette-item:hover,
.cmd-palette-item.active {
  background: var(--bg-warm);
}
.cmd-palette-item.active {
  border-left-color: var(--orange);
}
.cmd-palette-item .player-headshot,
.cmd-palette-item .player-headshot-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cmd-palette-item .player-headshot-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.cmd-palette-item-info {
  flex: 1;
  min-width: 0;
}
.cmd-palette-item-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-palette-item-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-light);
}
.cmd-palette-item-ppg {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.cmd-palette-pos {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  border: 2px solid;
  color: #fff;
}
.cmd-palette-pos.qb { background: var(--pos-qb); border-color: var(--pos-qb); }
.cmd-palette-pos.rb { background: var(--pos-rb); border-color: var(--pos-rb); }
.cmd-palette-pos.wr { background: var(--pos-wr); border-color: var(--pos-wr); }
.cmd-palette-pos.te { background: var(--pos-te); border-color: var(--pos-te); }
.cmd-palette-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-light);
  padding: 8px 16px;
  border-top: 2px dashed var(--ink-faint);
  display: flex;
  gap: 12px;
}
.cmd-palette-hint kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-warm);
  border: 2px solid var(--ink-faint);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ===== TIER LOCK INDICATORS ===== */
/* Visual-only lock icons for Pro and Elite features.
   These do NOT block access — they signal tier membership.
   The ::after pseudo adds the lock/diamond icon inline. */
.pro-locked::after {
  content: '\1F512';
  font-size: 10px;
  opacity: 0.45;
  margin-left: 3px;
  cursor: help;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.pro-locked:hover::after {
  opacity: 0.8;
}

.elite-locked::after {
  content: '\1F48E';
  font-size: 10px;
  opacity: 0.45;
  margin-left: 3px;
  cursor: help;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.elite-locked:hover::after {
  opacity: 0.8;
}

/* Hide lock icons on very small screens to save space */
@media (max-width: 480px) {
  .pro-locked::after,
  .elite-locked::after {
    font-size: 8px;
    margin-left: 2px;
  }
}
@media (max-width: 375px) {
  .screener-table th.pro-locked::after,
  .screener-table th.elite-locked::after {
    display: none;
  }
}

/* ===== 375PX SMALL PHONE BREAKPOINT ===== */
@media (max-width: 375px) {
  .topnav {
    padding: 4px 6px;
  }
  .logo-mark {
    width: 28px;
    height: 28px;
    font-size: 16px;
    border-radius: 8px;
  }
  .logo-text {
    font-size: 13px;
  }
  .nav-links a {
    font-size: 9px;
    padding: 2px 5px;
  }
  .btn-chunky, .btn-primary {
    font-size: 10px;
    padding: 4px 7px;
  }
  .chip {
    font-size: 9px;
    padding: 4px 8px;
  }
  .nav-search-hint {
    display: none;
  }
  /* Command Palette — tighter on small phones */
  .cmd-palette-backdrop {
    padding-top: 8vh;
  }
  .cmd-palette-input {
    font-size: 16px;
    padding: 8px 10px;
  }
  .cmd-palette-item {
    padding: 6px 12px;
    gap: 8px;
  }
  .cmd-palette-item-name {
    font-size: 13px;
  }
  .cmd-palette-results {
    max-height: 320px;
  }
  /* Auth Modal — full width on small phones */
  .auth-modal {
    padding: 16px;
    width: 100%;
    max-width: 100vw;
    border-radius: 12px;
  }
  .auth-form input {
    font-size: 16px;
    padding: 10px 12px;
  }
}

/* ===== Player Tags ===== */
.player-tag-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1.5px solid;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.5px;
  line-height: 14px;
}

.tag-icon {
  display: inline-block;
  font-size: 8px;
  color: var(--ink-faint);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}
tr:hover .tag-icon {
  opacity: 1;
}
.tag-icon:hover {
  color: var(--orange);
}

.tag-picker {
  position: fixed;
  z-index: 1000;
  background: var(--bg-card);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px;
  min-width: 120px;
  display: none;
}
.tag-picker-title {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: 2px 6px 6px;
  letter-spacing: 1px;
}
.tag-picker-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  border-radius: 6px;
  transition: background 0.1s;
}
.tag-picker-option:hover {
  background: var(--tag-bg, var(--bg-warm));
}
.tag-picker-option.active {
  background: var(--tag-bg);
  border: 2px solid var(--tag-color);
}
.tag-picker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-picker-clear {
  color: var(--ink-light);
  font-weight: 400;
  margin-top: 4px;
  border-top: 1px dashed var(--ink-faint);
  padding-top: 6px;
  border-radius: 0 0 6px 6px;
}

/* ─── Player Notes ─────────────────────────────────────────── */
.notes-cell {
  cursor: pointer;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-hand);
  font-size: 13px;
  color: var(--ink-medium);
  padding: 2px 6px !important;
}
.notes-cell.has-note:hover {
  background: var(--bg-warm);
}
.notes-cell .note-pencil {
  opacity: 0;
  color: var(--ink-faint);
  font-size: 12px;
  transition: opacity 0.15s;
}
tr:hover .notes-cell .note-pencil {
  opacity: 0.6;
}
.notes-cell .note-pencil:hover {
  opacity: 1;
  color: var(--orange);
}
.notes-cell .note-text {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-editor-popup {
  position: fixed;
  z-index: 1000;
  background: var(--bg-card);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 10px;
  width: 260px;
  display: none;
}
.note-editor-title {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: 0 2px 6px;
  letter-spacing: 0.5px;
}
.note-editor-input {
  width: 100%;
  min-height: 50px;
  max-height: 80px;
  resize: vertical;
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 6px 8px;
  box-sizing: border-box;
  line-height: 1.3;
}
.note-editor-input:focus {
  outline: none;
  border-color: var(--orange);
}
.note-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.note-editor-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-light);
}

/* Hover card note */
.hover-card-note {
  font-family: var(--font-hand);
  font-size: 13px;
  color: var(--ink-medium);
  padding: 4px 0 0;
  border-top: 1px dashed var(--ink-faint);
  margin-top: 6px;
  line-height: 1.3;
  max-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hover-card-note-icon {
  color: var(--ink-light);
  font-size: 11px;
}

/* ===== DIFF MODE BANNER ===== */
.diff-mode-banner {
  background: var(--green-light);
  border: 2px solid var(--green);
  border-radius: 8px;
  padding: 6px 16px;
  margin: 4px 0;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.diff-mode-label {
  background: var(--green);
  color: white;
  font-weight: 700;
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}