/* ============================================================
   MERKID.IS — DESIGN SYSTEM v3 — "STUDIO"
   ============================================================
   Editorial premium label studio. Cream paper, deep forest,
   antique gold. Fraunces (display only) + Inter (UI workhorse)
   + JetBrains Mono (data). 4px grid, calm motion, real focus.

   Loads after 01..03 so this file wins the cascade. Targets
   existing class names so the JS stays untouched. Every value
   traces to a token below — no magic numbers.
   ============================================================ */

/* === 1. TOKENS ============================================ */

:root {
  /* Surfaces — warm parchment */
  --v3-bg:        #F4F0E5;
  --v3-s1:        #FBF8EE;
  --v3-s2:        #EDE6D2;
  --v3-s3:        #E2D9C0;
  --v3-s4:        #CBC0A0;

  /* Borders */
  --v3-line-soft:  rgba(15, 26, 20, 0.08);
  --v3-line:       rgba(15, 26, 20, 0.14);
  --v3-line-firm:  rgba(15, 26, 20, 0.24);

  /* Accent — deep forest */
  --v3-acc:        #1B4332;
  --v3-acc-light:  #2D6A4F;
  --v3-acc-deep:   #143028;
  --v3-acc-tint:   rgba(27, 67, 50, 0.08);
  --v3-acc-glow:   rgba(27, 67, 50, 0.18);
  --v3-acc-ring:   rgba(27, 67, 50, 0.32);

  /* Heritage gold */
  --v3-gold:       #B68B3C;
  --v3-gold-light: #D4AE5C;
  --v3-gold-tint:  rgba(182, 139, 60, 0.10);

  /* Status */
  --v3-danger:     #B4412A;
  --v3-danger-tint:rgba(180, 65, 42, 0.10);
  --v3-warn:       #B68B3C;
  --v3-success:    #2D6A4F;
  --v3-info:       #2C5282;

  /* Text */
  --v3-ink:        #0F1A14;
  --v3-ink-2:      #3F4D43;
  --v3-ink-3:      #748072;
  --v3-ink-on:     #FBF8EE;

  /* Radius */
  --v3-r-xs: 3px;
  --v3-r-sm: 5px;
  --v3-r-md: 8px;
  --v3-r-lg: 12px;
  --v3-r-pill: 999px;

  /* Elevation */
  --v3-sh-1: 0 1px 0 rgba(15,26,20,0.04);
  --v3-sh-2: 0 1px 2px rgba(15,26,20,0.06), 0 2px 8px rgba(15,26,20,0.04);
  --v3-sh-3: 0 4px 12px rgba(15,26,20,0.08), 0 1px 3px rgba(15,26,20,0.06);
  --v3-sh-4: 0 12px 32px rgba(15,26,20,0.12), 0 4px 12px rgba(15,26,20,0.06);
  --v3-sh-5: 0 30px 64px rgba(15,26,20,0.16), 0 12px 24px rgba(15,26,20,0.08);

  /* Motion */
  --v3-dur-fast:   140ms;
  --v3-dur:        220ms;
  --v3-dur-slow:   360ms;
  --v3-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --v3-ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Type */
  --v3-serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --v3-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v3-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale */
  --v3-sp-1: 4px;  --v3-sp-2: 8px;  --v3-sp-3: 12px; --v3-sp-4: 16px;
  --v3-sp-5: 20px; --v3-sp-6: 24px; --v3-sp-8: 32px; --v3-sp-10: 40px;
  --v3-sp-12: 48px; --v3-sp-16: 64px;

  /* Re-map legacy tokens so 01-import.css inherits the new palette
     without us having to override every rule individually. */
  --bg:         var(--v3-bg) !important;
  --s1:         var(--v3-s1) !important;
  --s2:         var(--v3-s2) !important;
  --s3:         var(--v3-s3) !important;
  --s4:         var(--v3-s4) !important;
  --border:     var(--v3-line) !important;
  --border2:    var(--v3-line-firm) !important;
  --acc:        var(--v3-acc) !important;
  --acc-dim:    var(--v3-acc-tint) !important;
  --acc-glow:   var(--v3-acc-glow) !important;
  --acc-light:  var(--v3-acc-light) !important;
  --acc-bright: var(--v3-acc) !important;
  --text:       var(--v3-ink) !important;
  --text2:      var(--v3-ink-2) !important;
  --text3:      var(--v3-ink-3) !important;
  --shadow:     var(--v3-sh-2) !important;
  --shadow-md:  var(--v3-sh-4) !important;
  --r:          var(--v3-r-sm) !important;
  --r2:         var(--v3-r-md) !important;
  --r3:         var(--v3-r-lg) !important;
}

/* === 2. BASE ============================================== */

html, body {
  font-family: var(--v3-sans) !important;
  font-feature-settings: "ss01", "cv11", "cv02", "cv03";
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
  color: var(--v3-ink);
  background: var(--v3-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(ellipse 70% 50% at 12% -5%, rgba(27, 67, 50, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 88% 105%, rgba(182, 139, 60, 0.06) 0%, transparent 55%) !important;
}

/* Subtle paper grain — keeps the editorial premium feel without overwhelming */
body::before {
  opacity: 0.035 !important;
  z-index: 0 !important; /* sit BEHIND content, not on top */
  mix-blend-mode: multiply !important;
}

/* === 3. TYPOGRAPHY ======================================== */

h1, h2, h3 {
  font-family: var(--v3-serif);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--v3-ink);
}

.auth-logo-text,
.logo-name {
  font-family: var(--v3-serif) !important;
  font-weight: 700 !important;
  font-variation-settings: "opsz" 144, "SOFT" 40 !important;
  letter-spacing: -0.04em !important;
  color: var(--v3-ink) !important;
}

.auth-logo-text {
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  line-height: 0.9 !important;
}

.auth-logo-text span {
  color: var(--v3-gold) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-variation-settings: "opsz" 144 !important;
}

.logo-name {
  font-size: 1.6rem !important;
  letter-spacing: -0.028em !important;
  line-height: 1 !important;
}

.logo-domain {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  color: var(--v3-ink-3) !important;
  margin-top: var(--v3-sp-1) !important;
}

.auth-tagline {
  font-family: var(--v3-serif) !important;
  font-style: italic !important;
  font-variation-settings: "opsz" 14 !important;
  font-size: 0.92rem !important;
  color: var(--v3-ink-2) !important;
  font-weight: 400 !important;
  margin-top: var(--v3-sp-3) !important;
}

.modal-title {
  font-family: var(--v3-serif) !important;
  font-weight: 600 !important;
  font-variation-settings: "opsz" 32 !important;
  letter-spacing: -0.018em !important;
  font-size: 1.25rem !important;
  color: var(--v3-ink) !important;
}

.dash-section-title,
.dash-label,
.fsec-title,
.brand-section-title {
  font-family: var(--v3-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  font-size: 0.66rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
}

.ph-title {
  font-family: var(--v3-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  font-size: 0.66rem !important;
  text-transform: uppercase !important;
  color: var(--v3-acc) !important;
}

.dash-kpi {
  font-family: var(--v3-serif) !important;
  font-weight: 300 !important;
  font-variation-settings: "opsz" 144 !important;
  font-size: clamp(2rem, 4vw, 2.9rem) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.95 !important;
  color: var(--v3-ink) !important;
}

.dash-sub {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  color: var(--v3-acc) !important;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
}

.stat-box .sv,
.safn-stat-v {
  font-family: var(--v3-serif) !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144 !important;
  letter-spacing: -0.03em !important;
  font-size: 1.9rem !important;
  color: var(--v3-acc) !important;
}

/* === 4. AUTH SCREEN ====================================== */

.auth-screen {
  background: var(--v3-bg) !important;
  background-image:
    radial-gradient(ellipse 95% 70% at 50% -8%, rgba(27, 67, 50, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 35% at 50% 112%, rgba(182, 139, 60, 0.18) 0%, transparent 55%) !important;
  padding: var(--v3-sp-4) !important;
}

.auth-box {
  background: var(--v3-s1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-lg) !important;
  padding: clamp(36px, 6vw, 56px) clamp(28px, 5vw, 48px) clamp(48px, 6vw, 60px) !important;
  max-width: 460px !important;
  width: 100% !important;
  box-shadow: var(--v3-sh-5) !important;
  position: relative;
  overflow: hidden;
}

.auth-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--v3-acc) 0%, var(--v3-acc-light) 35%, var(--v3-gold) 100%);
}

.auth-box::after {
  content: 'EST. 2024  ·  REYKJAVÍK  ·  MERKID';
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--v3-sans);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--v3-ink-3);
  opacity: 0.55;
}

.auth-logo {
  gap: var(--v3-sp-2) !important;
  margin-bottom: var(--v3-sp-8) !important;
}

.auth-logo-img,
.auth-logo-mark img {
  filter: drop-shadow(0 4px 8px rgba(15, 26, 20, 0.08));
}

/* Auth tabs — clean editorial line */
.auth-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--v3-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  margin-bottom: var(--v3-sp-5) !important;
}

.auth-tab {
  border-radius: 0 !important;
  padding: 14px 8px !important;
  font-family: var(--v3-sans) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--v3-ink-3) !important;
  transition: all var(--v3-dur) var(--v3-ease) !important;
  margin-bottom: -1px !important;
}

.auth-tab:hover {
  color: var(--v3-ink) !important;
}

.auth-tab.active {
  color: var(--v3-acc) !important;
  border-bottom-color: var(--v3-acc) !important;
}

.afield {
  margin-bottom: var(--v3-sp-4) !important;
}

.afield label {
  display: block;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  font-size: 0.62rem !important;
  text-transform: uppercase;
  color: var(--v3-ink-3) !important;
  margin-bottom: var(--v3-sp-1) !important;
}

.afield input {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid var(--v3-line-firm) !important;
  border-radius: 0 !important;
  padding: 12px 2px !important;
  font-family: var(--v3-sans) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--v3-ink) !important;
  transition: border-color var(--v3-dur) var(--v3-ease) !important;
  outline: none !important;
}

.afield input::placeholder {
  color: var(--v3-ink-3);
  font-weight: 400;
}

.afield input:focus {
  border-bottom-color: var(--v3-acc) !important;
  box-shadow: none !important;
}

.auth-btn {
  width: 100% !important;
  background: var(--v3-acc) !important;
  color: var(--v3-ink-on) !important;
  border: none !important;
  border-radius: var(--v3-r-sm) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-size: 0.76rem !important;
  padding: 18px !important;
  margin-top: var(--v3-sp-5) !important;
  cursor: pointer;
  transition: background var(--v3-dur-fast) var(--v3-ease),
              transform var(--v3-dur) var(--v3-ease),
              box-shadow var(--v3-dur) var(--v3-ease) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(27, 67, 50, 0.18);
}

.auth-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform var(--v3-dur-slow) var(--v3-ease);
  pointer-events: none;
}

.auth-btn:hover {
  background: var(--v3-acc-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(27, 67, 50, 0.28) !important;
}

.auth-btn:hover::after { transform: translateX(100%); }

.auth-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 3px 10px rgba(27, 67, 50, 0.22) !important;
}

/* === 5. TOPBAR ============================================ */

.topbar {
  background: rgba(251, 248, 238, 0.85) !important;
  border-bottom: 1px solid var(--v3-line) !important;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--v3-line-soft) !important;
  z-index: 100;
}

.tsep {
  background: var(--v3-line) !important;
  opacity: 0.7;
}

/* Nav buttons */
.nb {
  border-radius: var(--v3-r-xs) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
  letter-spacing: -0.005em !important;
  padding: 9px 14px !important;
  background: transparent !important;
  color: var(--v3-ink-2) !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: background var(--v3-dur-fast) var(--v3-ease),
              color var(--v3-dur-fast) var(--v3-ease),
              border-color var(--v3-dur-fast) var(--v3-ease),
              box-shadow var(--v3-dur) var(--v3-ease) !important;
}

.nb:hover {
  background: var(--v3-s2) !important;
  color: var(--v3-ink) !important;
  transform: none !important;
}

.nb.active {
  background: var(--v3-acc) !important;
  color: var(--v3-ink-on) !important;
  border-color: var(--v3-acc) !important;
  box-shadow: 0 1px 2px rgba(27,67,50,0.22), 0 6px 14px rgba(27,67,50,0.18) !important;
}

.nb.active:hover {
  background: var(--v3-acc-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 2px rgba(27,67,50,0.22), 0 10px 22px rgba(27,67,50,0.24) !important;
}

/* User chip */
.user-btn {
  border-radius: var(--v3-r-xs) !important;
  border: 1px solid var(--v3-line) !important;
  background: transparent !important;
  cursor: pointer;
  transition: border-color var(--v3-dur) var(--v3-ease), background var(--v3-dur) var(--v3-ease) !important;
}

.user-btn:hover {
  border-color: var(--v3-acc) !important;
  background: var(--v3-s1) !important;
}

.user-av {
  background: linear-gradient(135deg, var(--v3-acc) 0%, var(--v3-acc-light) 100%) !important;
  font-family: var(--v3-serif) !important;
  font-weight: 500 !important;
  font-variation-settings: "opsz" 24 !important;
  color: var(--v3-ink-on);
}

.user-nm {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  color: var(--v3-ink);
}

/* Chips */
.chip {
  border-radius: var(--v3-r-xs) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-size: 0.62rem !important;
  padding: 5px 9px !important;
}

.chip.hi {
  background: var(--v3-gold-tint) !important;
  color: var(--v3-gold) !important;
  border: 1px solid rgba(182, 139, 60, 0.32) !important;
}

/* Dark mode toggle */
.dm-toggle {
  border-radius: var(--v3-r-xs) !important;
  border: 1px solid var(--v3-line) !important;
  background: transparent !important;
  cursor: pointer;
  transition: all var(--v3-dur) var(--v3-ease) !important;
}

.dm-toggle:hover {
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
  background: var(--v3-s1) !important;
}

/* Approval bell */
.appr-bell {
  border-radius: var(--v3-r-xs) !important;
  border: 1px solid var(--v3-line) !important;
  background: transparent !important;
  cursor: pointer;
  transition: all var(--v3-dur) var(--v3-ease) !important;
}

.appr-bell:hover {
  border-color: var(--v3-gold) !important;
  color: var(--v3-gold) !important;
}

.appr-bell-badge {
  background: var(--v3-gold) !important;
  color: var(--v3-ink-on) !important;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--v3-s1);
}

/* === 6. PANELS / LAYOUT =================================== */

.p-left {
  background: var(--v3-s1) !important;
  border-right: 1px solid var(--v3-line) !important;
}

.p-right {
  background: var(--v3-s1) !important;
  border-left: 1px solid var(--v3-line) !important;
}

.p-center {
  background: var(--v3-bg) !important;
}

.ph {
  background: var(--v3-s1) !important;
  border-bottom: 1px solid var(--v3-line) !important;
  padding: var(--v3-sp-5) var(--v3-sp-5) !important;
}

/* === 7. CARDS ============================================ */

.dash-card,
.fsec {
  background: var(--v3-s1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
  box-shadow: var(--v3-sh-1) !important;
  transition: transform var(--v3-dur) var(--v3-ease),
              box-shadow var(--v3-dur) var(--v3-ease),
              border-color var(--v3-dur) var(--v3-ease) !important;
}

.dash-card:hover,
.fsec:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--v3-sh-3) !important;
  border-color: var(--v3-line-firm) !important;
}

.fsec-title {
  font-family: var(--v3-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.74rem !important;
  color: var(--v3-ink-2) !important;
}

/* === 8. FORMS ============================================ */

.field label {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 0.62rem !important;
  color: var(--v3-ink-3) !important;
}

.fi, .fi-ta, .fi-sel {
  background: var(--v3-s1) !important;
  border: 1px solid var(--v3-line-firm) !important;
  border-radius: var(--v3-r-sm) !important;
  font-family: var(--v3-sans) !important;
  font-size: 0.92rem !important;
  color: var(--v3-ink) !important;
  padding: 9px 12px !important;
  transition: border-color var(--v3-dur) var(--v3-ease),
              box-shadow var(--v3-dur) var(--v3-ease) !important;
}

.fi:focus, .fi-ta:focus, .fi-sel:focus {
  border-color: var(--v3-acc) !important;
  box-shadow: 0 0 0 3px var(--v3-acc-glow) !important;
  outline: none !important;
}

.fi::placeholder, .fi-ta::placeholder {
  color: var(--v3-ink-3);
}

/* Toggle switches */
.tog {
  border-radius: var(--v3-r-pill) !important;
  background: var(--v3-s3) !important;
  border: 1px solid var(--v3-line-firm) !important;
  transition: background var(--v3-dur) var(--v3-ease), border-color var(--v3-dur) var(--v3-ease) !important;
}

.tog.on {
  background: var(--v3-acc) !important;
  border-color: var(--v3-acc) !important;
}

/* === 9. BUTTONS ========================================== */

.btn,
.lp-btn-primary,
.lp-btn-secondary,
.lp-btn-ghost {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: var(--v3-r-sm) !important;
  cursor: pointer;
  transition: background var(--v3-dur-fast) var(--v3-ease),
              transform var(--v3-dur) var(--v3-ease),
              box-shadow var(--v3-dur) var(--v3-ease),
              border-color var(--v3-dur-fast) var(--v3-ease) !important;
}

.lp-btn-primary,
.btn-acc {
  background: var(--v3-acc) !important;
  color: var(--v3-ink-on) !important;
  border: 1px solid var(--v3-acc) !important;
  box-shadow: 0 1px 2px rgba(27,67,50,0.18), 0 4px 14px rgba(27,67,50,0.16) !important;
}

.lp-btn-primary:hover,
.btn-acc:hover {
  background: var(--v3-acc-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 2px rgba(27,67,50,0.18), 0 10px 24px rgba(27,67,50,0.24) !important;
}

.lp-btn-primary:active,
.btn-acc:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(27,67,50,0.18) !important;
}

.lp-btn-secondary,
.btn-sec,
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--v3-line-firm) !important;
  color: var(--v3-ink-2) !important;
}

.lp-btn-secondary:hover,
.btn-sec:hover,
.btn-ghost:hover {
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
  background: var(--v3-acc-tint) !important;
}

/* Segment / type buttons */
.tp-btn, .seg-btn {
  border-radius: var(--v3-r-xs) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  background: transparent !important;
  border: 1px solid var(--v3-line) !important;
  color: var(--v3-ink-2) !important;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.tp-btn:hover, .seg-btn:hover {
  background: var(--v3-s2) !important;
  border-color: var(--v3-line-firm) !important;
  color: var(--v3-ink) !important;
}

.tp-btn.tp-active,
.seg-btn.sa {
  background: var(--v3-acc-tint) !important;
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
  box-shadow: 0 0 0 2px var(--v3-acc-glow) !important;
}

/* === 10. LIVE PILL (gold) ================================ */

.lp-live-pill {
  background: var(--v3-gold-tint) !important;
  border: 1px solid rgba(182, 139, 60, 0.32) !important;
  color: var(--v3-gold) !important;
  border-radius: var(--v3-r-pill) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-size: 0.62rem !important;
  padding: 4px 10px !important;
}

.lp-live-dot {
  background: var(--v3-gold) !important;
  box-shadow: 0 0 0 3px rgba(182, 139, 60, 0.18), 0 0 12px var(--v3-gold-light);
}

/* === 11. SCROLLBARS ====================================== */

.scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll::-webkit-scrollbar-track {
  background: transparent;
}

.scroll::-webkit-scrollbar-thumb {
  background: var(--v3-line-firm) !important;
  border-radius: var(--v3-r-pill) !important;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: var(--v3-acc) !important;
  background-clip: padding-box;
}

/* === 12. MODALS & MENUS ================================== */

.modal-bg {
  background: rgba(15, 26, 20, 0.55) !important;
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
}

.modal {
  background: var(--v3-s1) !important;
  border-radius: var(--v3-r-lg) !important;
  border: 1px solid var(--v3-line) !important;
  box-shadow: var(--v3-sh-5) !important;
}

.modal-h {
  border-bottom: 1px solid var(--v3-line) !important;
  padding: var(--v3-sp-5) var(--v3-sp-6) !important;
}

.modal-x {
  width: 32px;
  height: 32px;
  border-radius: var(--v3-r-sm) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--v3-ink-3) !important;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.modal-x:hover {
  background: var(--v3-s2) !important;
  border-color: var(--v3-line) !important;
  color: var(--v3-ink) !important;
}

.umenu {
  background: var(--v3-s1) !important;
  border-radius: var(--v3-r-md) !important;
  border: 1px solid var(--v3-line) !important;
  box-shadow: var(--v3-sh-4) !important;
  padding: var(--v3-sp-1) !important;
}

.umenu-item {
  border-radius: var(--v3-r-xs) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  font-size: 0.9rem !important;
  padding: 8px 10px !important;
  color: var(--v3-ink-2) !important;
  transition: background var(--v3-dur-fast) var(--v3-ease),
              color var(--v3-dur-fast) var(--v3-ease) !important;
}

.umenu-item:hover {
  background: var(--v3-s2) !important;
  color: var(--v3-ink) !important;
}

.umenu-item.danger {
  color: var(--v3-danger) !important;
}

.umenu-item.danger:hover {
  background: var(--v3-danger-tint) !important;
  color: var(--v3-danger) !important;
}

/* === 13. DASHBOARD VIZ =================================== */

.dash-bar {
  background: linear-gradient(180deg, var(--v3-acc) 0%, var(--v3-acc-light) 100%) !important;
  border-radius: 2px 2px 0 0 !important;
  transition: opacity var(--v3-dur) var(--v3-ease);
}

.dash-bar:hover { opacity: 0.85; }

.dash-prod-bar-fill {
  background: linear-gradient(90deg, var(--v3-acc) 0%, var(--v3-gold) 100%) !important;
}

/* === 14. SAFN (LIBRARY) ================================== */

.safn-doc-tab {
  border-radius: var(--v3-r-xs) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.safn-stat-l {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  font-size: 0.6rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
}

/* === 15. CANVAS / EDITOR ================================= */

.canvas-wrap {
  background: var(--v3-bg) !important;
}

.canvas-statusbar {
  background: var(--v3-s1) !important;
  border-top: 1px solid var(--v3-line) !important;
  font-family: var(--v3-mono) !important;
  font-size: 0.74rem !important;
  color: var(--v3-ink-3) !important;
}

.canvas-header {
  background: var(--v3-s1) !important;
  border-bottom: 1px solid var(--v3-line) !important;
}

.ch-print-btn {
  background: var(--v3-acc) !important;
  color: var(--v3-ink-on) !important;
  border: 1px solid var(--v3-acc) !important;
  border-radius: var(--v3-r-sm) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background var(--v3-dur-fast) var(--v3-ease), transform var(--v3-dur) var(--v3-ease) !important;
}

.ch-print-btn:hover {
  background: var(--v3-acc-light) !important;
  transform: translateY(-1px);
}

.ch-zoom-pill {
  background: var(--v3-s2) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-pill) !important;
  font-family: var(--v3-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--v3-ink-2);
}

/* Toolbar v2 — calm tool palette */
.tb2-btn {
  border-radius: var(--v3-r-xs) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--v3-ink-2) !important;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.tb2-btn:hover {
  background: var(--v3-s2) !important;
  border-color: var(--v3-line) !important;
  color: var(--v3-ink) !important;
}

.tb2-btn.active,
.tb2-btn.on {
  background: var(--v3-acc-tint) !important;
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
}

.tb2-glabel {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  font-size: 0.56rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
}

.tb2-sep {
  background: var(--v3-line) !important;
}

/* Ruler */
.ruler-h, .ruler-v {
  background: var(--v3-s2) !important;
  color: var(--v3-ink-3) !important;
  font-family: var(--v3-mono) !important;
  font-size: 0.62rem !important;
}

.ruler-corner {
  background: var(--v3-s3) !important;
  border-color: var(--v3-line) !important;
}

/* === 16. SSB (settings sidebar) ========================== */

.ssb-body {
  background: var(--v3-s1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
}

.ssb-divider {
  background: var(--v3-line) !important;
}

.ssb-chk-lbl {
  font-family: var(--v3-sans) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  color: var(--v3-ink-2) !important;
}

.ssb-section-h {
  font-family: var(--v3-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  font-size: 0.66rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
}

.ssb-close,
.ssb-del-btn {
  background: transparent !important;
  border: 1px solid var(--v3-line) !important;
  color: var(--v3-ink-2) !important;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.ssb-close:hover {
  background: var(--v3-s2) !important;
  color: var(--v3-ink) !important;
}

.ssb-del-btn:hover {
  border-color: var(--v3-danger) !important;
  color: var(--v3-danger) !important;
  background: var(--v3-danger-tint) !important;
}

/* === 17. APPROVALS / NOTIFICATIONS ======================= */

.appr-info {
  background: var(--v3-s1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
}

.appr-nm {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  color: var(--v3-ink) !important;
}

.appr-av {
  background: linear-gradient(135deg, var(--v3-acc) 0%, var(--v3-acc-light) 100%) !important;
  color: var(--v3-ink-on) !important;
  font-family: var(--v3-serif) !important;
  font-weight: 500 !important;
}

.appr-check {
  color: var(--v3-success) !important;
}

/* === 18. BRAND MODAL ==================================== */

.brand-modal {
  background: var(--v3-s1) !important;
  border-radius: var(--v3-r-lg) !important;
}

.brand-section {
  border-bottom: 1px solid var(--v3-line) !important;
  padding: var(--v3-sp-5) var(--v3-sp-6) !important;
}

.brand-section:last-of-type {
  border-bottom: none !important;
}

.brand-section-title {
  margin-bottom: var(--v3-sp-3) !important;
}

.brand-preview-bar,
.brand-preview-topbar {
  background: var(--v3-s2) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
}

/* === 19. SWATCHES ======================================= */

.swatch {
  border-radius: var(--v3-r-xs) !important;
  border: 2px solid var(--v3-line) !important;
  cursor: pointer;
  transition: transform var(--v3-dur-fast) var(--v3-ease-snap),
              border-color var(--v3-dur-fast) var(--v3-ease) !important;
}

.swatch:hover {
  transform: scale(1.08);
  border-color: var(--v3-line-firm) !important;
}

.swatch.active {
  border-color: var(--v3-acc) !important;
  box-shadow: 0 0 0 2px var(--v3-bg), 0 0 0 4px var(--v3-acc) !important;
}

/* === 20. INBOX ========================================== */

.inbox-item {
  border-bottom: 1px solid var(--v3-line) !important;
  padding: var(--v3-sp-3) var(--v3-sp-4) !important;
  cursor: pointer;
  transition: background var(--v3-dur-fast) var(--v3-ease) !important;
}

.inbox-item:hover {
  background: var(--v3-s2) !important;
}

.inbox-item:last-of-type {
  border-bottom: none !important;
}

.inbox-prod {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  color: var(--v3-ink) !important;
  font-size: 0.92rem;
}

.inbox-meta {
  font-family: var(--v3-sans) !important;
  color: var(--v3-ink-3) !important;
  font-size: 0.78rem;
}

/* === 21. STAMPS / MISC ================================== */

.stamp-block {
  background: var(--v3-s2) !important;
  border-left: 3px solid var(--v3-acc) !important;
  border-radius: 0 var(--v3-r-sm) var(--v3-r-sm) 0 !important;
  padding: var(--v3-sp-3) var(--v3-sp-4) !important;
}

.stamp-label {
  font-family: var(--v3-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  font-size: 0.62rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
}

.stamp-when {
  font-family: var(--v3-mono) !important;
  font-size: 0.78rem;
  color: var(--v3-ink-2) !important;
}

.stamp-who {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  color: var(--v3-ink) !important;
}

/* === 22. KEYBOARD SHORTCUTS ============================= */

.kbs-section {
  margin-bottom: var(--v3-sp-6);
}

.kbs-row {
  padding: var(--v3-sp-2) 0 !important;
  border-bottom: 1px solid var(--v3-line-soft) !important;
}

.kbs-keys {
  display: inline-flex;
  gap: 4px;
}

.kbs-keys kbd,
.kbs-keys span {
  font-family: var(--v3-mono) !important;
  font-size: 0.74rem !important;
  background: var(--v3-s2) !important;
  border: 1px solid var(--v3-line-firm) !important;
  border-bottom-width: 2px !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  color: var(--v3-ink) !important;
  box-shadow: 0 1px 0 var(--v3-line-soft);
}

.kbs-desc {
  font-family: var(--v3-sans) !important;
  color: var(--v3-ink-2) !important;
  font-size: 0.88rem;
}

/* === 23. EXPORT/SHARE PANEL ============================= */

.es-pill {
  background: var(--v3-s2) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-pill) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
  color: var(--v3-ink-2) !important;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.es-pill:hover {
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
  background: var(--v3-acc-tint) !important;
}

.es-btn-primary {
  background: var(--v3-acc) !important;
  color: var(--v3-ink-on) !important;
  border: 1px solid var(--v3-acc) !important;
  border-radius: var(--v3-r-sm) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background var(--v3-dur-fast) var(--v3-ease), transform var(--v3-dur) var(--v3-ease) !important;
}

.es-btn-primary:hover {
  background: var(--v3-acc-light) !important;
  transform: translateY(-1px);
}

.es-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--v3-line-firm) !important;
  color: var(--v3-ink-2) !important;
  border-radius: var(--v3-r-sm) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.es-btn-secondary:hover {
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
  background: var(--v3-acc-tint) !important;
}

.es-lbl {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  font-size: 0.62rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
}

/* === 24. MAC (autocomplete dropdown) ==================== */

.mac-dropdown {
  background: var(--v3-s1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
  box-shadow: var(--v3-sh-4) !important;
  padding: var(--v3-sp-1) !important;
}

.mac-header {
  font-family: var(--v3-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  font-size: 0.6rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
  padding: 8px 10px 4px;
}

.mac-item {
  border-radius: var(--v3-r-xs) !important;
  font-family: var(--v3-sans) !important;
  font-size: 0.9rem !important;
  color: var(--v3-ink-2) !important;
  padding: 8px 10px !important;
  cursor: pointer;
  transition: background var(--v3-dur-fast) var(--v3-ease) !important;
}

.mac-item:hover,
.mac-item.selected {
  background: var(--v3-acc-tint) !important;
  color: var(--v3-acc) !important;
}

.mac-item-match {
  font-weight: 700;
  color: var(--v3-acc);
}

.mac-item-count {
  font-family: var(--v3-mono) !important;
  font-size: 0.74rem;
  color: var(--v3-ink-3) !important;
}

/* === 25. CROP TOOLBAR ================================== */

.crop-toolbar {
  background: var(--v3-s1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
  box-shadow: var(--v3-sh-3) !important;
  padding: var(--v3-sp-2) !important;
}

.crop-tb-btn {
  border-radius: var(--v3-r-xs) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--v3-ink-2) !important;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.crop-tb-btn:hover {
  background: var(--v3-s2) !important;
  border-color: var(--v3-line) !important;
  color: var(--v3-ink) !important;
}

.crop-handle {
  background: var(--v3-acc) !important;
  border: 2px solid var(--v3-ink-on) !important;
  box-shadow: 0 1px 4px rgba(15,26,20,0.20);
}

/* === 26. LANDING (lp-) ================================== */

.lp-brand {
  font-family: var(--v3-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--v3-ink) !important;
}

.lp-brand-label {
  font-family: var(--v3-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  font-size: 0.62rem !important;
  text-transform: uppercase !important;
  color: var(--v3-ink-3) !important;
}

.lp-brand-icon {
  filter: drop-shadow(0 4px 12px rgba(15, 26, 20, 0.10));
}

.lp-actions {
  gap: var(--v3-sp-2) !important;
}

/* === 27. IMAGE STRIP & THUMBS =========================== */

.img-thumb {
  border-radius: var(--v3-r-sm) !important;
  border: 2px solid var(--v3-line) !important;
  cursor: pointer;
  transition: transform var(--v3-dur-fast) var(--v3-ease-snap),
              border-color var(--v3-dur-fast) var(--v3-ease) !important;
}

.img-thumb:hover {
  transform: scale(1.04);
  border-color: var(--v3-line-firm) !important;
}

.img-thumb.active {
  border-color: var(--v3-acc) !important;
}

.img-del {
  background: var(--v3-danger) !important;
  color: var(--v3-ink-on) !important;
  border-radius: var(--v3-r-pill) !important;
  border: 2px solid var(--v3-s1) !important;
  cursor: pointer;
}

/* === 28. SIDEBAR / SAFN COMPLEX ========================= */

.sb-item {
  border-radius: var(--v3-r-sm) !important;
  font-family: var(--v3-sans) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all var(--v3-dur-fast) var(--v3-ease) !important;
}

.sb-item:hover {
  background: var(--v3-s2) !important;
  color: var(--v3-ink) !important;
}

.sb-item.sb-open,
.sb-item.active {
  background: var(--v3-acc-tint) !important;
  color: var(--v3-acc) !important;
}

/* === 29. FOCUS — A11Y CRITICAL ========================== */

*:focus-visible {
  outline: 2px solid var(--v3-acc) !important;
  outline-offset: 2px !important;
  border-radius: var(--v3-r-xs);
}

/* Keep buttons clickable feedback even without focus-visible */
button:active,
.btn:active,
.nb:active,
.lp-btn-primary:active,
.lp-btn-secondary:active {
  transition-duration: var(--v3-dur-fast) !important;
}

/* === 30. RESPONSIVE ==================================== */

@media (max-width: 760px) {
  .auth-box {
    padding: 36px 24px 48px !important;
    border-radius: var(--v3-r-md) !important;
  }
  .auth-logo-text { font-size: 2.2rem !important; }
  .auth-tagline { font-size: 0.84rem !important; }

  .nb { font-size: 0.78rem !important; padding: 8px 10px !important; }
  .ph { padding: var(--v3-sp-3) var(--v3-sp-4) !important; }
}

@media (max-width: 540px) {
  .auth-box {
    padding: 32px 20px 44px !important;
    margin: 8px;
  }
  .auth-logo { margin-bottom: 24px !important; }
  .modal { border-radius: var(--v3-r-md) !important; }
  .modal-h { padding: var(--v3-sp-4) !important; }
  .dash-kpi { font-size: 1.8rem !important; }
}

/* === 31. PRINT (clean output) =========================== */

@media print {
  body::before { display: none !important; }
  .topbar, .p-left, .p-right, .canvas-statusbar, .canvas-header { display: none !important; }
}

/* === 32. 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;
  }
}

/* === 33. DARK MODE ===================================== */

html.dark {
  --v3-bg:        #0B100D;
  --v3-s1:        #131915;
  --v3-s2:        #1B231D;
  --v3-s3:        #232E27;
  --v3-s4:        #2F3D33;
  --v3-line-soft: rgba(241, 236, 223, 0.06);
  --v3-line:      rgba(241, 236, 223, 0.10);
  --v3-line-firm: rgba(241, 236, 223, 0.18);
  --v3-acc:       #4ADE80;
  --v3-acc-light: #6BEF97;
  --v3-acc-deep:  #22C55E;
  --v3-acc-tint:  rgba(74, 222, 128, 0.12);
  --v3-acc-glow:  rgba(74, 222, 128, 0.24);
  --v3-acc-ring:  rgba(74, 222, 128, 0.36);
  --v3-gold:      #D4AE5C;
  --v3-gold-light:#E8C877;
  --v3-gold-tint: rgba(212, 174, 92, 0.14);
  --v3-ink:       #F1ECDF;
  --v3-ink-2:     #C8CEC2;
  --v3-ink-3:     #7C8982;
  --v3-ink-on:    #0B100D;
  --v3-sh-1: 0 1px 0 rgba(0,0,0,0.4);
  --v3-sh-2: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --v3-sh-3: 0 4px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --v3-sh-4: 0 12px 32px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.3);
  --v3-sh-5: 0 30px 64px rgba(0,0,0,0.7), 0 12px 24px rgba(0,0,0,0.4);
}

html.dark body {
  background-image:
    radial-gradient(ellipse 70% 50% at 12% -5%, rgba(74, 222, 128, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 88% 105%, rgba(212, 174, 92, 0.05) 0%, transparent 55%) !important;
}

/* End of v3 design system */