@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --nb-bg: #fffdf5;
  --nb-dot: #d6d3c9;
  --nb-surface: #ffffff;
  --nb-surface-alt: #f6f4ec;
  --nb-text: #111827;
  --nb-muted: #4b5563;
  --nb-border: #111827;
  --nb-shadow: #111827;

  /* Fresh Neobrutalism Pop Colors */
  --nb-indigo: #4f46e5;
  --nb-indigo-text: #ffffff;
  --nb-yellow: #fde047;
  --nb-coral: #fb7185;
  --nb-mint: #4ade80;
  --nb-sky: #38bdf8;
  --nb-purple: #c084fc;
  --nb-amber: #fbbf24;
}

html.dark {
  --nb-bg: #111318;
  --nb-dot: #262b36;
  --nb-surface: #1a1d24;
  --nb-surface-alt: #242832;
  --nb-text: #f9fafb;
  --nb-muted: #9ca3af;
  --nb-border: #e5e7eb;
  --nb-shadow: #000000;

  --nb-indigo: #6366f1;
  --nb-indigo-text: #ffffff;
  --nb-yellow: #facc15;
  --nb-coral: #f43f5e;
  --nb-mint: #22c55e;
  --nb-sky: #0ea5e9;
  --nb-purple: #a855f7;
  --nb-amber: #f59e0b;
}

/* Base Canvas */
.nb-body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--nb-bg);
  background-image: radial-gradient(var(--nb-dot) 1.25px, transparent 1.25px);
  background-size: 20px 20px;
  color: var(--nb-text);
}

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

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Header & Overlays */
.nb-header {
  background-color: var(--nb-surface);
  border-bottom: 3px solid var(--nb-border);
}

.nb-overlay {
  background-color: var(--nb-bg);
  background-image: radial-gradient(var(--nb-dot) 1.25px, transparent 1.25px);
  background-size: 20px 20px;
}

.nb-backdrop {
  background-color: rgba(17, 24, 39, 0.65);
  backdrop-filter: blur(2px);
}

/* Brand Logo */
.nb-logo {
  background-color: var(--nb-yellow);
  color: #111827;
  border: 2.5px solid var(--nb-border);
  border-radius: 0.75rem;
  box-shadow: 3px 3px 0px var(--nb-shadow);
}

/* Sync Status Pill & Dots */
.nb-sync-pill {
  background-color: var(--nb-surface-alt);
  color: var(--nb-text);
  border: 2px solid var(--nb-border);
  border-radius: 9999px;
}

.nb-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  border: 1.5px solid #111827;
  display: inline-block;
}
.nb-dot-syncing {
  background-color: #facc15;
  animation: nbPulse 0.9s infinite alternate;
}
.nb-dot-error {
  background-color: #f43f5e;
}
.nb-dot-locked {
  background-color: #9ca3af;
}
.nb-dot-ok {
  background-color: #22c55e;
}

@keyframes nbPulse {
  from { transform: scale(0.85); opacity: 0.6; }
  to { transform: scale(1.2); opacity: 1; }
}

/* Panels, Cards & Modals */
.nb-panel {
  background-color: var(--nb-surface);
  border: 2.5px solid var(--nb-border);
  border-radius: 1rem;
  box-shadow: 4px 4px 0px var(--nb-shadow);
}

.nb-modal {
  background-color: var(--nb-surface);
  color: var(--nb-text);
  border: 3px solid var(--nb-border);
  border-radius: 1.15rem;
  box-shadow: 6px 6px 0px var(--nb-shadow);
}

.nb-card {
  background-color: var(--nb-surface);
  border: 2.5px solid var(--nb-border);
  border-radius: 1rem;
  box-shadow: 4px 4px 0px var(--nb-shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.nb-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--nb-shadow);
}

/* Summary Stat Cards */
.nb-stat {
  border: 2.5px solid var(--nb-border);
  border-radius: 1rem;
  box-shadow: 4px 4px 0px var(--nb-shadow);
  color: #111827;
}
.nb-stat-yellow { background-color: var(--nb-yellow); }
.nb-stat-coral  { background-color: var(--nb-coral); }
.nb-stat-mint   { background-color: var(--nb-mint); }
.nb-stat-sky    { background-color: var(--nb-sky); }

/* Tactile Neobrutalist Buttons */
.nb-btn {
  border: 2px solid var(--nb-border);
  border-radius: 0.7rem;
  box-shadow: 3px 3px 0px var(--nb-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
  cursor: pointer;
}

.nb-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--nb-shadow);
}

.nb-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px var(--nb-shadow);
}

.nb-btn-primary {
  background-color: var(--nb-indigo);
  color: var(--nb-indigo-text);
}

.nb-btn-surface {
  background-color: var(--nb-surface);
  color: var(--nb-text);
}

.nb-btn-yellow {
  background-color: var(--nb-yellow);
  color: #111827;
}

.nb-btn-green {
  background-color: var(--nb-mint);
  color: #111827;
}

.nb-btn-danger {
  background-color: var(--nb-coral);
  color: #111827;
}

/* Inputs & Selects */
.nb-input {
  background-color: var(--nb-surface-alt);
  color: var(--nb-text);
  border: 2px solid var(--nb-border);
  border-radius: 0.7rem;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.nb-input:focus {
  outline: none;
  background-color: var(--nb-surface);
  box-shadow: 3px 3px 0px var(--nb-indigo);
}

.nb-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--nb-indigo);
  border: 2px solid var(--nb-border);
  border-radius: 0.25rem;
}

/* Category Tabs */
.nb-tab {
  padding: 0.4rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  border: 2px solid var(--nb-border);
  background-color: var(--nb-surface-alt);
  color: var(--nb-text);
  box-shadow: 2px 2px 0px var(--nb-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.nb-tab:active {
  transform: translate(1.5px, 1.5px);
  box-shadow: 0px 0px 0px var(--nb-shadow);
}

.nb-tab-active {
  background-color: var(--nb-yellow);
  color: #111827;
  box-shadow: 3px 3px 0px var(--nb-shadow);
}

/* Badges */
.nb-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 800;
  border: 1.5px solid #111827;
  color: #111827;
}

.nb-badge-blue    { background-color: #7dd3fc; }
.nb-badge-green   { background-color: #86efac; }
.nb-badge-yellow  { background-color: #fde047; }
.nb-badge-purple  { background-color: #d8b4fe; }
.nb-badge-red     { background-color: #fda4af; }
.nb-badge-amber   { background-color: #fcd34d; }
.nb-badge-neutral { background-color: #e5e7eb; }

.nb-tag-chip {
  background-color: var(--nb-surface-alt);
  color: var(--nb-text);
  border: 1.5px solid var(--nb-border);
  border-radius: 0.45rem;
}

/* Copy Boxes & Progress Track */
.nb-copy-box {
  background-color: var(--nb-surface-alt);
  border: 2px solid var(--nb-border);
  border-radius: 0.7rem;
}

.nb-sn-box {
  background-color: rgba(74, 222, 128, 0.2);
  border: 2px solid var(--nb-border);
  border-radius: 0.6rem;
}

.nb-progress-track {
  width: 100%;
  height: 0.65rem;
  background-color: var(--nb-surface-alt);
  border: 2px solid var(--nb-border);
  border-radius: 9999px;
  overflow: hidden;
}

.nb-bar-green   { background-color: #22c55e; }
.nb-bar-amber   { background-color: #f59e0b; }
.nb-bar-red     { background-color: #f43f5e; }
.nb-bar-neutral { background-color: #9ca3af; }

/* History Item & Toast */
.nb-history-item {
  background-color: var(--nb-surface-alt);
  border: 2px solid var(--nb-border);
  border-radius: 0.85rem;
  box-shadow: 3px 3px 0px var(--nb-shadow);
}

.nb-alert-error {
  background-color: #fda4af;
  color: #111827;
  border: 2px solid #111827;
  border-radius: 0.65rem;
}

.nb-toast {
  background-color: var(--nb-yellow);
  color: #111827;
  border: 2.5px solid #111827;
  border-radius: 0.75rem;
  box-shadow: 4px 4px 0px #111827;
}