/* ======================
   Tokens & Themes
   ====================== */
:root {
  /* Brand / accent defaults (Dark theme baseline) */
  --blue-1: #3A6EA5;
  --blue-2: #6FA8DC;
  --blue-3: #4F8CC9;

  /* Surfaces - Dark default */
  --bg: #1E1E1E;
  --surface: #242424;
  --surface-2: #2A2A2A;

  /* Text & lines */
  --text: #DDE6F1;
  --text-muted: #A7B5C6;
  --border: #343a40;

  /* Misc */
  --shadow: rgba(0, 0, 0, 0.35);
  --radius: 8px;
  --titlebar-grad: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  --focus-ring: rgba(58, 110, 165, 0.35); /* focus outline color */
  --tint: rgba(79, 140, 201, .15);        /* subtle strip/tint backgrounds */
}

/* Explicit 'theme-dark' hook for clarity (same as :root) */
.theme-dark {}

/* Light theme overrides */
.theme-light {
  --bg: #F0F0F0;
  --surface: #FFFFFF;
  --surface-2: #F7F7F7;
  --text: #202020;
  --text-muted: #4B5563;
  --border: #D0D7DE;
  --shadow: rgba(0, 0, 0, 0.08);
  /* keep --blue-* from root */
  --focus-ring: rgba(58, 110, 165, 0.30);
  --tint: rgba(79, 140, 201, .12);
}

/* iHeartRadio – Dark */
.theme-iheart-dark {
  --blue-1: #B0001E; /* deep red */
  --blue-2: #E4002B; /* iHeart red */
  --bg: #121214;
  --surface: #1A1A1C;
  --surface-2: #222226;
  --text: #FFFFFF;
  --text-muted: #E7A6B0; /* soft rose for subdued text */
  --border: #2a1216;
  --shadow: rgba(0, 0, 0, 0.5);
  --titlebar-grad: linear-gradient(90deg, var(--blue-2), var(--blue-1));
  --focus-ring: rgba(228, 0, 43, 0.35);
  --tint: rgba(228, 0, 43, .12);
}

/* iHeartRadio – Light */
.theme-iheart-light {
  --blue-1: #B0001E;
  --blue-2: #E4002B;
  --bg: #FFF5F7; /* light rose wash */
  --surface: #FFFFFF;
  --surface-2: #FFF0F3;
  --text: #1A1A1A;
  --text-muted: #7A4953;
  --border: #F4C2CB;
  --shadow: rgba(228, 0, 43, 0.08);
  --titlebar-grad: linear-gradient(90deg, var(--blue-2), var(--blue-1));
  --focus-ring: rgba(228, 0, 43, 0.30);
  --tint: rgba(228, 0, 43, .10);
}

/* Win16 Dark Theme */
.theme-win16-dark {
  --bg: #000000;
  --surface: #000088;
  --surface-2: #000000;
  --text: #FFFFFF;
  --text-muted: #CCCCCC;
  --border: #000044;
  --shadow: none;
  --radius: 0;
  --titlebar-grad: #0000AA;
  --focus-ring: #FFFFFF;
  --tint: #000088;
}

/* Win16 Light Theme */
.theme-win16-light {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F0F0F0;
  --text: #000000;
  --text-muted: #333333;
  --border: #0000AA;
  --shadow: none;
  --radius: 0;
  --titlebar-grad: #0000AA;
  --focus-ring: #000000;
  --tint: #E0E0FF;
}

.theme-win16-dark .btn,
.theme-win16-light .btn {
  border-radius: 0;
  box-shadow: none;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: "Fixedsys", "Courier New", monospace;
  padding: 6px 12px;
}

.theme-win16-dark .btn-primary,
.theme-win16-light .btn-primary {
  background: #0000AA;
  color: #FFFFFF;
  border: 2px solid #000088;
}

.theme-win16-dark .btn-danger,
.theme-win16-light .btn-danger {
  background: #AA0000;
  color: #FFFFFF;
  border: 2px solid #880000;
}

.theme-win16-dark input[type='checkbox'],
.theme-win16-light input[type='checkbox'] {
  accent-color: #0000AA;
  width: 16px;
  height: 16px;
  border: 2px solid #000088;
  border-radius: 0;
  background: #000000;
  color: #FFFFFF;
}

.theme-win16-light select {
  border: 2px solid #0000AA;
  background: #FFFFFF;
  color: #000000;
  border-radius: 0;
  box-shadow: none;
  font-family: "Fixedsys", "Courier New", monospace;
  padding: 4px;
}
.theme-win16-dark select {
  border: 2px solid #0000AA;
  background: #000000;
  color: #FFFFFF;
  border-radius: 0;
  box-shadow: none;
  font-family: "Fixedsys", "Courier New", monospace;
  padding: 4px;
}

/* Win16 Theme Font Styling */
.theme-win16-dark, .theme-win16-light {
  font-family: "Courier New", Consolas, monospace;
}

.theme-win16-dark h1, .theme-win16-dark h2, .theme-win16-dark h3,
.theme-win16-dark label, .theme-win16-dark input, .theme-win16-dark select,
.theme-win16-dark textarea, .theme-win16-dark button,
.theme-win16-light h1, .theme-win16-light h2, .theme-win16-light h3,
.theme-win16-light label, .theme-win16-light input, .theme-win16-light select,
.theme-win16-light textarea, .theme-win16-light button {
  font-family: "Courier New", Consolas, monospace;
}

/* Final Fantasy 6 Menu Theme */
.theme-ff6-menu {
  --ff6-border: #FFFFFF;
  --ff6-text: #FFFFFF;
  --ff6-accent-green: #00FF00;
  --ff6-accent-cyan: #00FFFF;
  --ff6-accent-yellow: #FFFF00;
  font-family: "Consolas", "Courier New", monospace;
  color: var(--ff6-text);
  background: repeating-linear-gradient(
    to bottom,
    #1a2a6c 0px, #1a2a6c 12px,
    #1e3799 12px, #1e3799 24px,
    #2980b9 24px, #2980b9 36px,
    #27408b 36px, #27408b 48px,
    #355cbb 48px, #355cbb 60px,
    #3b6cb7 60px, #3b6cb7 72px,
    #1a2a6c 72px, #1a2a6c 84px
  );
}

/* Panels and menu boxes */
.theme-ff6-menu .panel,
.theme-ff6-menu .menu-box {
  background: linear-gradient(135deg, #1a2a6c 0%, #2980b9 100%);
  border: 6px solid var(--ff6-border);
  color: var(--ff6-text);
  font-family: "Consolas", "Courier New", monospace;
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
  font-size: 1.2em;
}

/* Headings and menu options */
.theme-ff6-menu h1,
.theme-ff6-menu h2,
.theme-ff6-menu h3,
.theme-ff6-menu .menu-option {
  color: var(--ff6-text);
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 1.4em;
}

/* Stats colors */
.theme-ff6-menu .stat-green { color: var(--ff6-accent-green); }
.theme-ff6-menu .stat-cyan { color: var(--ff6-accent-cyan); }
.theme-ff6-menu .stat-yellow { color: var(--ff6-accent-yellow); }

/* Buttons */
.theme-ff6-menu .btn,
.theme-ff6-menu button {
  background: linear-gradient(135deg, #1a2a6c 0%, #2980b9 100%);
  color: var(--ff6-text);
  border: 6px solid var(--ff6-border);
  border-radius: 0;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 14px 32px;
  box-shadow: none;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 1.2em;
}

/* Dropdowns */
.theme-ff6-menu select {
background: repeating-linear-gradient(
  to bottom,
  #1a2a6c 0px,   #1a2a6c 40px,
  #1e3799 40px,  #1e3799 80px,
  #2980b9 80px,  #2980b9 120px,
  #27408b 120px, #27408b 160px,
  #355cbb 160px, #355cbb 200px,
  #3b6cb7 200px, #3b6cb7 240px,
  #1a2a6c 240px, #1a2a6c 280px
);

  color: var(--ff6-text);
  border: 6px solid var(--ff6-border);
  border-radius: 0;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 12px;
  box-shadow: none;
  font-size: 1.2em;
}

/* Ensure dropdown text remains visible */
.theme-ff6-menu select,
.theme-ff6-menu option {
  color: #FFFFFF !important;
  background: #1a2a6c !important;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 1.2em;
}

/* Checkboxes */
.theme-ff6-menu input[type='checkbox'] {
  accent-color: #FFFFFF;
  width: 24px;
  height: 24px;
  border: 6px solid var(--ff6-border);
  border-radius: 0;
  background: repeating-linear-gradient(
    to bottom,
    #1a2a6c 0px, #1a2a6c 10px,
    #1e3799 10px, #1e3799 20px,
    #2980b9 20px, #2980b9 30px,
    #27408b 30px, #27408b 40px,
    #355cbb 40px, #355cbb 50px,
    #3b6cb7 50px, #3b6cb7 60px,
    #1a2a6c 60px, #1a2a6c 70px
  );
}

.theme-ff6-menu input[type="text"],
.theme-ff6-menu textarea {
  background: #FFFFFF;
  color: #000000;
  border: 6px solid #FFFFFF;
  border-radius: 0;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 12px;
  box-shadow: none;
  font-size: 1.2em;
  outline: none;
}

/* Optional: On focus, highlight the border in yellow for a classic RPG effect */
.theme-ff6-menu input[type="text"]:focus,
.theme-ff6-menu textarea:focus {
  border-color: #000000;
}

/* Example for menu option hover/focus */
.theme-ff6-menu .menu-option:hover,
.theme-ff6-menu .btn:hover,
.theme-ff6-menu button:hover {
  background: #2980b9;
  color: #FFFF00;
  border-color: #000000;
}

/* ======================
   IFDown-inspired Amber Themes
   ====================== */

/* IFDark — amber-forward dark */
.theme-ifdark {
  /* Amber accent set */
  --blue-1: #FFB000; /* Amber 500 */
  --blue-2: #FFD166; /* Amber 300/400 mix */

  /* Warm, high-contrast dark surfaces */
  --bg: #11100E;         /* deep warm charcoal */
  --surface: #181612;    /* card bg */
  --surface-2: #201D17;  /* inputs/buttons bg */

  /* Text */
  --text: #F7F3EA;       /* warm ivory */
  --text-muted: #D7C79A; /* desaturated amber sand */

  /* Lines, shadows, ring */
  --border: #3A2F1A;     /* warm brown edge */
  --shadow: rgba(0, 0, 0, 0.60);
  --titlebar-grad: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  --focus-ring: rgba(255, 176, 0, 0.35);

  /* Subheader tint (theme-aware) */
  --tint: rgba(255, 176, 0, .12);

  /* Sweep intensity controls (more contrast) */
  --sweep-hi: 0.45;
  --sweep-med: 0.30;
  --sweep-lo: 0.18;
}

/* IFLight — amber-forward light */
.theme-iflight {
  /* Amber accent set */
  --blue-1: #FFB000; /* Amber 500 */
  --blue-2: #FFD166; /* Amber 300/400 mix */

  /* Warm light surfaces */
  --bg: #FFFAF2;         /* warm off-white wash */
  --surface: #FFFFFF;
  --surface-2: #FFF4DA;  /* soft pale amber */

  /* Text */
  --text: #221A0E;       /* deep espresso */
  --text-muted: #6E5B36; /* toasted ochre */

  /* Lines, shadows, ring */
  --border: #F0D7A1;     /* light amber border */
  --shadow: rgba(255, 176, 0, 0.08);
  --titlebar-grad: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  --focus-ring: rgba(255, 176, 0, 0.28);

  /* Subheader tint (theme-aware) */
  --tint: rgba(255, 176, 0, .12);

  /* Sweep intensity controls (more contrast, a bit lower than dark theme) */
  --sweep-hi: 0.38;
  --sweep-med: 0.26;
  --sweep-lo: 0.14;
}

.theme-castlevania {
  /* Castlevania IV-inspired palette */
  --bg: linear-gradient(0deg, #660033 0%, #000000 100%);         /* Deep gothic purple-black #18141c;    */
  --surface: #2a1e2f;      /* Stone castle wall */
  --surface-2: #614051;    /* Slightly lighter stone */
  --text: #e9d8a6;         /* Candlelit parchment */
  --text-muted: #b09e7c;   /* Faded gold */
  --border: #6c4f3d;       /* Ornate bronze */
  --shadow: rgba(40, 20, 60, 0.55); /* Heavy shadow */
  --radius: 10px;
  --blue-1: #6a3fa0;       /* Royal purple accent */
  --blue-2: #c72c41;       /* Blood red accent */
  --titlebar-grad: linear-gradient(90deg, #FF0038, #660033);
  --focus-ring: rgba(199, 44, 65, 0.35); /* Blood red glow */
  --tint: rgba(106, 63, 160, 0.18);      /* Subtle purple overlay */
}

/* ======================
   Base layout
   ====================== */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, sans-serif;
  margin: 0;
}

.app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}

.titlebar {
  background: var(--titlebar-grad);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Needed for animated overlay to sit behind text */
  position: relative;
  overflow: hidden;
}
/* Ensure titlebar content sits above the animated overlay */
.titlebar > * {
  position: relative;
  z-index: 1;
}

/* ------- Animated sweep for IFDark/IFLight only (stronger contrast) ------- */
.theme-ifdark .titlebar::after,
.theme-iflight .titlebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Multiply makes the darkening more pronounced on both light & dark */
  mix-blend-mode: multiply;

  /* Three layered patterns at different scales/speeds to feel “sporadic” */
  background-image:
    /* Narrow band pattern with high peaks */
    linear-gradient(
      90deg,
      rgba(0,0,0,0)                               0%,
      rgba(0,0,0,var(--sweep-med))                4%,
      rgba(0,0,0,0)                               10%,
      rgba(0,0,0,var(--sweep-hi))                 16%,
      rgba(0,0,0,0)                               24%,
      rgba(0,0,0,var(--sweep-lo))                 32%,
      rgba(0,0,0,0)                               40%,
      rgba(0,0,0,var(--sweep-med))                48%,
      rgba(0,0,0,0)                               58%,
      rgba(0,0,0,var(--sweep-hi))                 68%,
      rgba(0,0,0,0)                               78%,
      rgba(0,0,0,var(--sweep-lo))                 88%,
      rgba(0,0,0,0)                               100%
    ),
    /* Wider band pattern to add broader pockets of darkness */
    linear-gradient(
      90deg,
      rgba(0,0,0,0)                               0%,
      rgba(0,0,0,calc(var(--sweep-med) * 0.9))    6%,
      rgba(0,0,0,0)                               16%,
      rgba(0,0,0,calc(var(--sweep-hi) * 0.9))     25%,
      rgba(0,0,0,0)                               38%,
      rgba(0,0,0,calc(var(--sweep-lo) * 0.9))     48%,
      rgba(0,0,0,0)                               60%,
      rgba(0,0,0,calc(var(--sweep-hi) * 0.85))    72%,
      rgba(0,0,0,0)                               86%,
      rgba(0,0,0,calc(var(--sweep-med) * 0.9))    94%,
      rgba(0,0,0,0)                               100%
    ),
    /* Broad soft sweep to visibly deepen as it passes */
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.22) 50%,
      rgba(0,0,0,0) 100%
    );

  /* Scales—larger than 100% to allow long, smooth motion */
  background-size: 240% 100%, 320% 100%, 220% 100%;

  /* Right-to-left flow; each layer at a different speed */
  animation: if-amber-sweep 30s linear infinite;

  /* Improve perf */
  will-change: background-position;
}

/* Keyframes to move all layers at different speeds */
@keyframes if-amber-sweep {
  from { background-position: 140% 0, 210% 0, 160% 0; }
  to   { background-position: -40% 0, -110% 0, -60% 0; }
}

/* Subheader */
.subheader {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--tint);      /* theme-aware subtle strip */
  color: var(--text-muted);
}

/* Main area: two columns, Notes is its own panel on the right */
.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 18px;
}
.main-vault {
  display: grid;
  grid-template-columns: 1fr 8fr;
  gap: 20px;
  padding: 18px;
  gap: 12px;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; }
}

/* Panels */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--shadow);
}
.panel-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: bold;
}
.panel-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.panel-body-vault {
  padding: 14px;
  display: grid;
  gap: 12px;
  max-height: 220px;        /* Adjust as needed */
  overflow-y: auto;
}

.notes-panel .panel-body {
  display: flex;
  flex-direction: column;
}
.notes-panel textarea {
  flex: 1 1 auto;
  min-height: 420px;
  resize: vertical;
}

/* Inputs */
input[type="text"], select, textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

/* Checkbox group */
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Footer / buttons */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  justify-content: flex-start;    /* 🔄 Changed from space-between to flex-start */
  align-items: center;
}
.btns {
  display: flex;
  gap: 10px;
  margin-left: 1rem;             /* ➕ Added left margin to separate buttons from status text */
}
.btn {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .2s ease,
    transform .15s ease;
}
/* Primary & Danger base styles */
.btn-primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1));
  color: #fff;
  border-color: transparent;
}
.btn-danger {
  background: linear-gradient(180deg, #c93737, #9a2b2b);
  color: #fff;
  border-color: transparent;
}

/* Primary & Danger base styles */
.btn-primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1));
  color: #fff;
  border-color: transparent;
}
.btn-danger {
  background: linear-gradient(180deg, #c93737, #9a2b2b);
  color: #fff;
  border-color: transparent;
}

/* Button hover/active/focus effects */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--shadow);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--shadow);
}
.btn:focus-visible {
  outline: 2px solid transparent; /* remove default outline */
  box-shadow:
    0 0 0 3px var(--focus-ring),
    0 6px 18px var(--shadow);
}

/* Make primary & danger feel a touch more responsive */
.btn-primary:hover {
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2));
}
.btn-primary:active {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1));
}
.btn-danger:hover {
  background: linear-gradient(180deg, #e14d4d, #b93535);
}
.btn-danger:active {
  background: linear-gradient(180deg, #b93535, #e14d4d);
}
/* Save button transition effect */
.btn-save-transition {
  box-shadow: 0 0 0 6px var(--focus-ring), 0 6px 18px var(--shadow);
  transform: scale(1.04);
  transition:
    box-shadow 0.4s cubic-bezier(.4,2,.3,.7),
    transform 0.25s cubic-bezier(.4,2,.3,.7);
}


.status { color: var(--text-muted); }

/* Utilities & a11y */
.titlebar a { color: inherit; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* About page tweak: ensure a single column stack */
.about-page .main {
  grid-template-columns: 1fr;
}

/* ======================
   Solved Checkbox Styling
   ====================== */
.solved-checkbox input[type="checkbox"] {
  accent-color: #28a745; /* Green accent for modern browsers */
}
.solved-checkbox label {
  color: #28a745;
  font-weight: 600;
}
/* A small celebratory pop on label */
html.celebrate .solved-checkbox label {
  animation: solved-pop 800ms ease-out;
  text-shadow: 0 0 0 rgba(40,167,69,0.0);
}
@keyframes solved-pop {
  0%   { transform: scale(1);   text-shadow: 0 0 0 rgba(40,167,69,0); }
  30%  { transform: scale(1.1); text-shadow: 0 0 18px rgba(40,167,69,0.7); }
  100% { transform: scale(1);   text-shadow: 0 0 0 rgba(40,167,69,0); }
}

/* ======================
   Confetti Layer
   ====================== */
#confetti-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Don’t block UI */
  overflow: visible;
  z-index: 9999;
}
.confetti {
  position: absolute;
  top: -10px; /* Start slightly off-screen */
  width: 10px;
  height: 14px;
  opacity: 0.9;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  /* Animated via CSS vars (set by JS) */
  animation:
    confetti-fall var(--dur, 1.6s) linear forwards,
    confetti-sway var(--sway, 0.8s) ease-in-out infinite alternate;
}
@keyframes confetti-fall {
  to {
    transform:
      translate3d(var(--dx, 0px), 100vh, 0)
      rotate(var(--rot, 720deg));
    opacity: 0;
  }
}
@keyframes confetti-sway {
  from { margin-left: 0; }
  to   { margin-left: var(--sway-x, 30px); }
}

/* ======================
   Smooth theme transitions
   ====================== */
body, .panel, .titlebar, .footer,
input[type="text"], select, textarea, .btn {
  transition:
    background-color .4s ease,
    color .4s ease,
    border-color .4s ease,
    box-shadow .3s ease;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .confetti { animation: none !important; }
  #confetti-container { display: none; }
  html.celebrate .solved-checkbox label { animation: none; }

  /* Disable titlebar sweep animation for accessibility */
  .theme-ifdark .titlebar::after,
  .theme-iflight .titlebar::after {
    animation: none !important;
  }

  /* Reduce or remove transitions/transform-based motion */
  body, .panel, .titlebar, .footer,
  input[type="text"], select, textarea, .btn {
    transition: none !important;
  }
  .btn:hover, .btn:active { transform: none !important; }
}

/* ... (existing styles up to the end of file) ... */

/* Ensure single-column layout on the Entries Viewer and About pages */
.about-page .main,
.dbview-page .main {
  grid-template-columns: 1fr;
}

/* Entries table styling for dbview page */
#entriesTable {
  width: 100%;
  border-collapse: collapse;
}
#entriesTable th, #entriesTable td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}
#entriesTable th {
  cursor: pointer;
  user-select: none;
}
#entriesTable tbody tr:nth-child(odd) {
  background: var(--surface-2);
}
#entriesTable tbody tr:hover {
  background: var(--tint);
}

.theme-ifdark .titlebar::before,
.theme-iflight .titlebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.10) 0px,
      rgba(0,0,0,0.10) 2px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  background-size: 100% 4px, 3px 100%;
  mix-blend-mode: multiply;
  animation: crt-scanlines-vertical 12s linear infinite;
  will-change: background-position;
}

@keyframes crt-scanlines-vertical {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 100%, 0 0; }
}

/* ======================
   Vault Modal
   ====================== */
#vaultModal.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;            /* JS sets 'flex' to open it */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 10000;           /* above confetti (9999) */
}

#vaultModal .modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
  width: min(560px, 92vw);
}

#vaultModal .modal-header,
#vaultModal .modal-footer {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

#vaultModal .modal-footer {
  border-bottom: none;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#vaultModal .modal-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

/* Push Reset to far right without moving other buttons */
.footer .spacer { flex: 1; }

/* ======================
   Vault Modal — Hardening
   ====================== */
#vaultModal {                     /* ID-only to maximize specificity */
  position: fixed !important;     /* ensure it escapes normal flow */
  inset: 0 !important;            /* top:0; right:0; bottom:0; left:0 */
  display: none;                  /* JS will flip to 'flex' */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 10000;                 /* above confetti (9999) */
}

#vaultModal .modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
  width: min(560px, 92vw);
}

#vaultModal .modal-header,
#vaultModal .modal-footer {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

#vaultModal .modal-footer {
  border-bottom: none;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#vaultModal .modal-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}