/* ============================================================
   MERKID.IS — DESIGN SYSTEM v4 — "STUDIO POPPINS"
   ============================================================
   Mandate from Geir 2026-04-29: Poppins everywhere, keep green,
   go wild, make it flawless. Smooth working designer feel.

   v4 nukes the cream-yellow editorial vibe and goes for clean,
   modern, friendly-precise. Inspired by Linear / Figma / Notion.
   White cards, generous rounded corners, real shadow depth,
   smooth spring motion, bigger confident buttons.

   Loads after every other stylesheet so it owns the look.
   Targets 319 existing classes. JS / DOM untouched.
   ============================================================ */

/* Poppins is loaded via <link rel="stylesheet"> in index.html so the
   request kicks off in parallel with the HTML parse, not after CSS
   parsing. The @import here used to delay text render by 50-100ms.
   Weight 300 was never used, so it's been dropped. */

/* === 1. TOKENS — fully replace v3 ============================ */

:root {
  /* Surfaces — softer warm-white, not parchment cream */
  --m-bg:        #F4F1E8;
  --m-bg-2:      #EFEBDD;
  --m-paper:     #FFFFFF;
  --m-paper-2:   #FBF9F2;
  --m-tint-1:    #ECE7D6;
  --m-tint-2:    #DDD7C2;

  /* Borders — softer, less yellow */
  --m-line-soft: rgba(15, 26, 20, 0.06);
  --m-line:      rgba(15, 26, 20, 0.10);
  --m-line-firm: rgba(15, 26, 20, 0.16);
  --m-line-bold: rgba(15, 26, 20, 0.28);

  /* Accent — keep forest, brighter */
  --m-acc:       #1B4332;
  --m-acc-mid:   #2D6A4F;
  --m-acc-light: #40916C;
  --m-acc-glow:  #95D5B2;
  --m-acc-deep:  #102A20;
  --m-acc-tint:  rgba(27, 67, 50, 0.07);
  --m-acc-tint2: rgba(27, 67, 50, 0.12);
  --m-acc-ring:  rgba(27, 67, 50, 0.28);
  --m-acc-grad:  linear-gradient(135deg, #1B4332 0%, #2D6A4F 60%, #40916C 100%);

  /* Heritage gold — used sparingly */
  --m-gold:      #C8924C;
  --m-gold-tint: rgba(200, 146, 76, 0.10);

  /* Status */
  --m-danger:    #C03B2A;
  --m-danger-tint: rgba(192, 59, 42, 0.08);
  --m-warn:      #D4920E;
  --m-success:   #2D6A4F;
  --m-info:      #2563EB;

  /* Text */
  --m-ink:       #0F1A14;
  --m-ink-2:     #3B4A40;
  --m-ink-3:     #6B7A6F;
  --m-ink-4:     #6B7872; /* was #9CA39E — too light for WCAG AA placeholder (2.8:1). Now ~5.4:1 on white. */
  --m-on-acc:    #FBF9F2;

  /* Radius — generous */
  --m-r-xs:  6px;
  --m-r-sm:  10px;
  --m-r-md:  14px;
  --m-r-lg:  18px;
  --m-r-xl:  24px;
  --m-r-pill: 999px;

  /* Elevation — proper depth stack */
  --m-sh-0: 0 0 0 1px var(--m-line-soft);
  --m-sh-1: 0 1px 2px rgba(15,26,20,0.04), 0 1px 1px rgba(15,26,20,0.03);
  --m-sh-2: 0 2px 4px rgba(15,26,20,0.05), 0 4px 12px rgba(15,26,20,0.06);
  --m-sh-3: 0 4px 8px rgba(15,26,20,0.06), 0 12px 24px rgba(15,26,20,0.08);
  --m-sh-4: 0 8px 16px rgba(15,26,20,0.08), 0 24px 48px rgba(15,26,20,0.10);
  --m-sh-5: 0 16px 32px rgba(15,26,20,0.10), 0 40px 80px rgba(15,26,20,0.14);
  --m-sh-acc: 0 1px 2px rgba(27,67,50,0.20), 0 4px 12px rgba(27,67,50,0.18);
  --m-sh-acc-hi: 0 2px 4px rgba(27,67,50,0.22), 0 12px 28px rgba(27,67,50,0.28);

  /* Motion — spring physics */
  --m-dur-1: 120ms;
  --m-dur-2: 200ms;
  --m-dur-3: 320ms;
  --m-dur-4: 480ms;
  --m-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Type */
  --m-font: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --m-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing */
  --m-1: 4px;  --m-2: 8px;  --m-3: 12px; --m-4: 16px;
  --m-5: 20px; --m-6: 24px; --m-7: 32px; --m-8: 40px;
  --m-9: 48px; --m-10: 64px; --m-11: 80px; --m-12: 96px;

  /* Re-map every legacy token so 01/02 inherit v4 */
  --bg:         var(--m-bg) !important;
  --s1:         var(--m-paper) !important;
  --s2:         var(--m-bg-2) !important;
  --s3:         var(--m-tint-1) !important;
  --s4:         var(--m-tint-2) !important;
  --border:     var(--m-line) !important;
  --border2:    var(--m-line-firm) !important;
  --acc:        var(--m-acc) !important;
  --acc-dim:    var(--m-acc-tint) !important;
  --acc-glow:   var(--m-acc-ring) !important;
  --acc-light:  var(--m-acc-mid) !important;
  --acc-bright: var(--m-acc) !important;
  --text:       var(--m-ink) !important;
  --text2:      var(--m-ink-2) !important;
  --text3:      var(--m-ink-3) !important;
  --shadow:     var(--m-sh-1) !important;
  --shadow-md:  var(--m-sh-3) !important;
  --r:          var(--m-r-sm) !important;
  --r2:         var(--m-r-md) !important;
  --r3:         var(--m-r-lg) !important;
  --gold:       var(--m-gold) !important;
  --gold-light: #E0AE6C !important;
  --gold-dim:   var(--m-gold-tint) !important;
  --serif:      var(--m-font) !important;
  --sans:       var(--m-font) !important;
}

/* === 2. BASE — Poppins everywhere ============================ */

*, *::before, *::after {
  font-family: var(--m-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  font-family: var(--m-font) !important;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  letter-spacing: -0.005em;
  color: var(--m-ink);
  background: var(--m-bg);
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(ellipse 75% 55% at 12% -8%, rgba(27, 67, 50, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% 105%, rgba(64, 145, 108, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(27, 67, 50, 0.02) 0%, transparent 60%) !important;
}

body::before {
  opacity: 0.025 !important;
  z-index: 0 !important;
  mix-blend-mode: multiply !important;
}

/* Code/data still mono */
code, kbd, samp, pre, .canvas-statusbar, .ruler-h, .ruler-v, .stamp-when {
  font-family: var(--m-mono) !important;
}

/* Soft selection color */
::selection {
  background: var(--m-acc-tint2);
  color: var(--m-acc);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--m-font) !important;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--m-ink);
}

.auth-logo-text,
.logo-name {
  font-family: var(--m-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  color: var(--m-ink) !important;
  font-style: normal !important;
}

.auth-logo-text {
  font-size: clamp(2.6rem, 5.2vw, 3.6rem) !important;
  line-height: 0.95 !important;
}

.auth-logo-text span {
  background: var(--m-acc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

.logo-name {
  font-size: 1.5rem !important;
  letter-spacing: -0.034em !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.logo-domain {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--m-ink-3) !important;
  margin-top: 4px !important;
}

.auth-tagline {
  font-family: var(--m-font) !important;
  font-style: normal !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  color: var(--m-ink-2) !important;
  margin-top: var(--m-3) !important;
  letter-spacing: -0.005em !important;
}

.modal-title,
.modal h2,
.modal h3 {
  font-family: var(--m-font) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.022em !important;
  color: var(--m-ink) !important;
  font-style: normal !important;
}

.dash-section-title,
.dash-label,
.fsec-title,
.brand-section-title,
.ph-title,
.es-lbl,
.stamp-label,
.safn-stat-l,
.tb2-glabel,
.ssb-section-h,
.mac-header {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  font-size: 0.66rem !important;
  text-transform: uppercase !important;
  color: var(--m-ink-3) !important;
}

.ph-title {
  color: var(--m-acc) !important;
}

.dash-kpi {
  font-family: var(--m-font) !important;
  font-weight: 700 !important;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--m-ink) !important;
  font-style: normal !important;
}

.dash-sub {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  color: var(--m-acc) !important;
  letter-spacing: -0.005em;
  font-size: 0.82rem;
}

.stat-box .sv,
.safn-stat-v {
  font-family: var(--m-font) !important;
  font-weight: 700 !important;
  font-size: 1.85rem !important;
  letter-spacing: -0.034em !important;
  color: var(--m-acc) !important;
  font-style: normal !important;
}

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

.auth-screen {
  background: var(--m-bg) !important;
  background-image:
    radial-gradient(ellipse 95% 70% at 50% -10%, rgba(27, 67, 50, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(64, 145, 108, 0.18) 0%, transparent 55%) !important;
  padding: var(--m-4) !important;
}

.auth-box {
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-r-xl) !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(--m-sh-5) !important;
  position: relative;
  overflow: hidden;
}

.auth-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--m-acc-grad);
  border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
}

.auth-box::after {
  content: 'EST. 2024  ·  REYKJAVÍK  ·  MERKID';
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-family: var(--m-font);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--m-ink-4);
  opacity: 0.7;
}

.auth-logo {
  gap: var(--m-2) !important;
  margin-bottom: var(--m-7) !important;
}

.auth-logo-img,
.auth-logo-mark img {
  filter: drop-shadow(0 6px 16px rgba(27, 67, 50, 0.16));
}

.auth-tabs {
  background: var(--m-bg-2) !important;
  border-radius: var(--m-r-md) !important;
  border: none !important;
  border-bottom: none !important;
  padding: 4px !important;
  gap: 0 !important;
  margin-bottom: var(--m-6) !important;
}

.auth-tab {
  border-radius: var(--m-r-sm) !important;
  padding: 12px 8px !important;
  font-family: var(--m-font) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  border: none !important;
  background: transparent !important;
  color: var(--m-ink-3) !important;
  transition: all var(--m-dur-2) var(--m-ease) !important;
  cursor: pointer;
}

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

.auth-tab.active {
  background: var(--m-paper) !important;
  color: var(--m-acc) !important;
  box-shadow: var(--m-sh-1), 0 0 0 1px var(--m-line) !important;
}

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

.afield label {
  display: block;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-size: 0.84rem !important;
  text-transform: none !important;
  color: var(--m-ink-2) !important;
  margin-bottom: 6px !important;
}

.afield input {
  width: 100% !important;
  background: var(--m-paper-2) !important;
  border: 1.5px solid var(--m-line) !important;
  border-radius: var(--m-r-sm) !important;
  padding: 13px 14px !important;
  font-family: var(--m-font) !important;
  font-size: 0.96rem !important;
  font-weight: 500 !important;
  color: var(--m-ink) !important;
  transition: border-color var(--m-dur-2) var(--m-ease),
              box-shadow var(--m-dur-2) var(--m-ease),
              background var(--m-dur-2) var(--m-ease) !important;
  outline: none !important;
}

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

.afield input:hover {
  border-color: var(--m-line-firm) !important;
}

.afield input:focus {
  border-color: var(--m-acc) !important;
  background: var(--m-paper) !important;
  box-shadow: 0 0 0 4px var(--m-acc-tint2) !important;
}

.auth-btn {
  width: 100% !important;
  background: var(--m-acc-grad) !important;
  color: var(--m-on-acc) !important;
  border: none !important;
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  font-size: 0.95rem !important;
  padding: 16px !important;
  margin-top: var(--m-5) !important;
  cursor: pointer;
  transition: transform var(--m-dur-2) var(--m-ease-spring),
              box-shadow var(--m-dur-2) var(--m-ease) !important;
  position: relative;
  overflow: hidden;
  box-shadow: var(--m-sh-acc);
}

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

.auth-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--m-sh-acc-hi) !important;
}

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

.auth-btn:active {
  transform: translateY(0) scale(0.99) !important;
  transition-duration: var(--m-dur-1) !important;
}

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

.topbar {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid var(--m-line) !important;
  backdrop-filter: saturate(1.6) blur(20px);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: 0 1px 0 var(--m-line-soft), 0 4px 24px rgba(15,26,20,0.03) !important;
  z-index: 100;
}

.tsep {
  background: var(--m-line) !important;
  opacity: 0.6;
}

.nb {
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 500 !important;
  font-size: 0.86rem !important;
  letter-spacing: -0.005em !important;
  padding: 9px 14px !important;
  background: transparent !important;
  color: var(--m-ink-2) !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.nb:hover {
  background: var(--m-bg-2) !important;
  color: var(--m-ink) !important;
}

.nb.active {
  background: var(--m-acc-grad) !important;
  color: var(--m-on-acc) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: var(--m-sh-acc) !important;
}

.nb.active:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--m-sh-acc-hi) !important;
}

.user-btn {
  border-radius: var(--m-r-sm) !important;
  border: 1px solid var(--m-line) !important;
  background: var(--m-paper) !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.user-btn:hover {
  border-color: var(--m-acc) !important;
  background: var(--m-paper) !important;
  box-shadow: 0 0 0 4px var(--m-acc-tint) !important;
  transform: translateY(-1px);
}

.user-av {
  background: var(--m-acc-grad) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  color: var(--m-on-acc);
  border-radius: var(--m-r-pill) !important;
  box-shadow: 0 1px 2px rgba(27,67,50,0.20);
}

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

/* Chips */
.chip {
  border-radius: var(--m-r-pill) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  font-size: 0.7rem !important;
  padding: 4px 10px !important;
}

.chip.hi {
  background: var(--m-gold-tint) !important;
  color: var(--m-gold) !important;
  border: 1px solid rgba(200, 146, 76, 0.30) !important;
}

.dm-toggle, .appr-bell {
  border-radius: var(--m-r-sm) !important;
  border: 1px solid var(--m-line) !important;
  background: var(--m-paper) !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.dm-toggle:hover {
  border-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--m-acc-tint);
}

.appr-bell:hover {
  border-color: var(--m-gold) !important;
  color: var(--m-gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--m-gold-tint);
}

.appr-bell-badge {
  background: var(--m-gold) !important;
  color: var(--m-on-acc) !important;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--m-r-pill);
  box-shadow: 0 0 0 2px var(--m-paper);
}

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

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

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

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

.ph {
  background: transparent !important;
  border-bottom: 1px solid var(--m-line-soft) !important;
  padding: var(--m-5) var(--m-5) !important;
}

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

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

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

.fsec-title {
  font-family: var(--m-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  font-size: 0.94rem !important;
  color: var(--m-ink) !important;
}

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

.field label {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  font-size: 0.8rem !important;
  color: var(--m-ink-2) !important;
  margin-bottom: 6px !important;
}

.fi, .fi-ta, .fi-sel, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  background: var(--m-paper) !important;
  border: 1.5px solid var(--m-line) !important;
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--m-ink) !important;
  padding: 11px 14px !important;
  transition: border-color var(--m-dur-2) var(--m-ease),
              box-shadow var(--m-dur-2) var(--m-ease) !important;
  outline: none !important;
}

.fi:hover, .fi-ta:hover, .fi-sel:hover {
  border-color: var(--m-line-firm) !important;
}

.fi:focus, .fi-ta:focus, .fi-sel:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--m-acc) !important;
  box-shadow: 0 0 0 4px var(--m-acc-tint2) !important;
  outline: none !important;
}

.fi::placeholder, .fi-ta::placeholder, input::placeholder, textarea::placeholder {
  color: var(--m-ink-4) !important;
  font-weight: 400 !important;
}

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

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

/* === 9. BUTTONS — chunky, confident, smooth ============== */

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

.lp-btn-primary,
.btn-acc {
  background: var(--m-acc-grad) !important;
  color: var(--m-on-acc) !important;
  border: none !important;
  padding: 12px 20px !important;
  box-shadow: var(--m-sh-acc) !important;
}

.lp-btn-primary:hover,
.btn-acc:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--m-sh-acc-hi) !important;
}

.lp-btn-primary:active,
.btn-acc:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: var(--m-dur-1) !important;
}

.lp-btn-secondary,
.btn-sec,
.btn-ghost {
  background: var(--m-paper) !important;
  border: 1.5px solid var(--m-line) !important;
  color: var(--m-ink-2) !important;
  padding: 11px 18px !important;
  box-shadow: var(--m-sh-1);
}

.lp-btn-secondary:hover,
.btn-sec:hover,
.btn-ghost:hover {
  border-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
  background: var(--m-paper) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--m-acc-tint), var(--m-sh-1) !important;
}

.btn-blue {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%) !important;
  color: white !important;
  border: none !important;
  padding: 11px 18px !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.20), 0 4px 12px rgba(37, 99, 235, 0.18);
}

.btn-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.22), 0 12px 28px rgba(37, 99, 235, 0.28) !important;
}

/* Segment / type buttons */
.tp-btn, .seg-btn {
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  background: var(--m-paper) !important;
  border: 1.5px solid var(--m-line) !important;
  color: var(--m-ink-2) !important;
  padding: 9px 12px !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.tp-btn:hover, .seg-btn:hover {
  background: var(--m-paper) !important;
  border-color: var(--m-line-firm) !important;
  color: var(--m-ink) !important;
  transform: translateY(-1px);
  box-shadow: var(--m-sh-1);
}

.tp-btn.tp-active,
.seg-btn.sa {
  background: var(--m-acc-tint2) !important;
  border-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 3px var(--m-acc-tint) !important;
}

/* === 10. LIVE PILL ====================================== */

.lp-live-pill {
  background: var(--m-gold-tint) !important;
  border: 1px solid rgba(200, 146, 76, 0.32) !important;
  color: var(--m-gold) !important;
  border-radius: var(--m-r-pill) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 0.66rem !important;
  padding: 5px 12px !important;
}

.lp-live-dot {
  background: var(--m-gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 146, 76, 0.18), 0 0 14px var(--m-gold);
}

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

.scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--m-line-firm) !important;
  border-radius: var(--m-r-pill) !important;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover {
  background: var(--m-acc) !important;
  background-clip: padding-box;
}

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

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

.modal {
  background: var(--m-paper) !important;
  border-radius: var(--m-r-xl) !important;
  border: 1px solid var(--m-line) !important;
  box-shadow: var(--m-sh-5) !important;
  overflow: hidden;
}

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

.modal-x {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--m-r-sm) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--m-ink-3) !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-x:hover {
  background: var(--m-bg-2) !important;
  border-color: var(--m-line) !important;
  color: var(--m-ink) !important;
  transform: rotate(90deg);
}

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

.umenu-item {
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  font-size: 0.92rem !important;
  padding: 9px 12px !important;
  color: var(--m-ink-2) !important;
  cursor: pointer;
  transition: all var(--m-dur-1) var(--m-ease) !important;
}

.umenu-item:hover {
  background: var(--m-bg-2) !important;
  color: var(--m-ink) !important;
  padding-left: 14px !important;
}

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

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

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

.dash-bar {
  background: var(--m-acc-grad) !important;
  border-radius: var(--m-r-xs) var(--m-r-xs) 0 0 !important;
  transition: transform var(--m-dur-2) var(--m-ease-spring), opacity var(--m-dur-2) var(--m-ease) !important;
  cursor: pointer;
}

.dash-bar:hover {
  opacity: 0.92;
  transform: scaleY(1.02);
  transform-origin: bottom;
}

.dash-prod-bar-fill {
  background: linear-gradient(90deg, var(--m-acc) 0%, var(--m-acc-light) 60%, var(--m-gold) 100%) !important;
  border-radius: var(--m-r-pill) !important;
}

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

.safn-doc-tab {
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  padding: 8px 14px !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.safn-stat-l {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-size: 0.78rem !important;
  text-transform: none !important;
  color: var(--m-ink-3) !important;
}

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

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

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

.canvas-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid var(--m-line) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ch-print-btn {
  background: var(--m-acc-grad) !important;
  color: var(--m-on-acc) !important;
  border: none !important;
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  cursor: pointer;
  padding: 10px 18px !important;
  box-shadow: var(--m-sh-acc) !important;
  transition: transform var(--m-dur-2) var(--m-ease-spring), box-shadow var(--m-dur-2) var(--m-ease) !important;
}

.ch-print-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--m-sh-acc-hi) !important;
}

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

/* Toolbar v2 */
.tb2-btn {
  border-radius: var(--m-r-sm) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--m-ink-2) !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
  font-family: var(--m-font) !important;
}

.tb2-btn:hover {
  background: var(--m-paper) !important;
  border-color: var(--m-line) !important;
  color: var(--m-ink) !important;
  box-shadow: var(--m-sh-1);
}

.tb2-btn.active,
.tb2-btn.on {
  background: var(--m-acc-tint2) !important;
  border-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
  box-shadow: 0 0 0 2px var(--m-acc-tint);
}

.tb2-glabel {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-size: 0.7rem !important;
  text-transform: none !important;
  color: var(--m-ink-3) !important;
}

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

.ruler-h, .ruler-v {
  background: var(--m-paper-2) !important;
  color: var(--m-ink-3) !important;
  font-family: var(--m-mono) !important;
  font-size: 0.62rem !important;
}

.ruler-corner {
  background: var(--m-tint-1) !important;
  border-color: var(--m-line) !important;
}

/* === 16. SSB =========================================== */

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

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

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

.ssb-section-h {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-size: 0.86rem !important;
  text-transform: none !important;
  color: var(--m-ink-2) !important;
}

.ssb-close, .ssb-del-btn {
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line) !important;
  color: var(--m-ink-2) !important;
  cursor: pointer;
  border-radius: var(--m-r-sm) !important;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.ssb-close:hover {
  background: var(--m-bg-2) !important;
  color: var(--m-ink) !important;
}

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

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

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

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

.appr-av {
  background: var(--m-acc-grad) !important;
  color: var(--m-on-acc) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
}

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

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

.brand-modal {
  background: var(--m-paper) !important;
  border-radius: var(--m-r-xl) !important;
}

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

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

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

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

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

.swatch {
  border-radius: var(--m-r-sm) !important;
  border: 2px solid var(--m-line) !important;
  cursor: pointer;
  transition: transform var(--m-dur-2) var(--m-ease-spring),
              border-color var(--m-dur-2) var(--m-ease),
              box-shadow var(--m-dur-2) var(--m-ease) !important;
}

.swatch:hover {
  transform: scale(1.08);
  border-color: var(--m-line-firm) !important;
  box-shadow: var(--m-sh-2);
}

.swatch.active {
  border-color: var(--m-acc) !important;
  box-shadow: 0 0 0 3px var(--m-bg), 0 0 0 5px var(--m-acc) !important;
}

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

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

.inbox-item:hover {
  background: var(--m-bg-2) !important;
}

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

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

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

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

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

.stamp-label {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-size: 0.78rem !important;
  text-transform: none !important;
  color: var(--m-ink-3) !important;
}

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

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

/* === 22. KBS ========================================= */

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

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

.kbs-keys kbd, .kbs-keys span {
  font-family: var(--m-mono) !important;
  font-size: 0.74rem !important;
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line-firm) !important;
  border-bottom-width: 2px !important;
  border-radius: var(--m-r-xs) !important;
  padding: 3px 7px !important;
  color: var(--m-ink) !important;
  box-shadow: var(--m-sh-1);
}

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

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

.es-pill {
  background: var(--m-paper) !important;
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-r-pill) !important;
  font-family: var(--m-font) !important;
  font-weight: 500 !important;
  font-size: 0.86rem !important;
  color: var(--m-ink-2) !important;
  cursor: pointer;
  padding: 6px 14px !important;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.es-pill:hover {
  border-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
  background: var(--m-acc-tint) !important;
  transform: translateY(-1px);
}

.es-btn-primary {
  background: var(--m-acc-grad) !important;
  color: var(--m-on-acc) !important;
  border: none !important;
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  cursor: pointer;
  padding: 12px 20px !important;
  box-shadow: var(--m-sh-acc);
  transition: transform var(--m-dur-2) var(--m-ease-spring), box-shadow var(--m-dur-2) var(--m-ease) !important;
}

.es-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--m-sh-acc-hi);
}

.es-btn-secondary {
  background: var(--m-paper) !important;
  border: 1.5px solid var(--m-line) !important;
  color: var(--m-ink-2) !important;
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  padding: 11px 18px !important;
  cursor: pointer;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.es-btn-secondary:hover {
  border-color: var(--m-acc) !important;
  color: var(--m-acc) !important;
  background: var(--m-acc-tint) !important;
  transform: translateY(-1px);
}

/* === 24. MAC ========================================= */

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

.mac-header {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-size: 0.74rem !important;
  text-transform: none !important;
  color: var(--m-ink-3) !important;
  padding: 8px 10px 4px;
}

.mac-item {
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-size: 0.92rem !important;
  color: var(--m-ink-2) !important;
  padding: 9px 12px !important;
  cursor: pointer;
  transition: all var(--m-dur-1) var(--m-ease) !important;
}

.mac-item:hover, .mac-item.selected {
  background: var(--m-acc-tint2) !important;
  color: var(--m-acc) !important;
  padding-left: 14px !important;
}

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

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

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

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

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

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

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

/* === 26. LANDING ==================================== */

.lp-brand {
  font-family: var(--m-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.034em !important;
  color: var(--m-ink) !important;
}

.lp-brand-label {
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-size: 0.78rem !important;
  text-transform: none !important;
  color: var(--m-ink-3) !important;
}

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

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

/* === 27. IMAGE THUMBS ============================== */

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

.img-thumb:hover {
  transform: scale(1.04) translateY(-2px);
  border-color: var(--m-line-firm) !important;
  box-shadow: var(--m-sh-2);
}

.img-thumb.active {
  border-color: var(--m-acc) !important;
  box-shadow: 0 0 0 3px var(--m-acc-tint);
}

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

/* === 28. SIDEBAR ==================================== */

.sb-item {
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 500 !important;
  cursor: pointer;
  padding: 9px 12px !important;
  transition: all var(--m-dur-2) var(--m-ease) !important;
}

.sb-item:hover {
  background: var(--m-bg-2) !important;
  color: var(--m-ink) !important;
  padding-left: 14px !important;
}

.sb-item.sb-open, .sb-item.active {
  background: var(--m-acc-tint2) !important;
  color: var(--m-acc) !important;
  font-weight: 600 !important;
}

/* === 29. LOADING SCREEN ============================= */

.loading {
  background: var(--m-bg) !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(27, 67, 50, 0.06) 0%, transparent 70%) !important;
}

@keyframes m-pulse-soft {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.4); opacity: 1; }
}

.loading-pulse > div {
  animation: m-pulse-soft 1.4s var(--m-ease) infinite !important;
}

/* === 30. FOCUS RINGS — A11Y ========================= */

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

button, .btn, .nb, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* === 30b. MOBILE EDITOR — preview-only mode ======== */
/* The desktop editor needs precise mouse interaction with rulers, snap
   guides, and a hairline selection model. Trying to adapt all that to
   touch on a phone would be its own product. Instead, on small screens
   we show a clean preview-only view: just the canvas, centered, plus a
   banner explaining you can edit on a bigger screen. */
@media (max-width: 760px) {
  .p-left, .p-right { display: none !important; }
  .p-center { width: 100% !important; padding: var(--m-3) !important; }
  .canvas-header { padding: var(--m-2) var(--m-3) !important; }
  .canvas-statusbar { display: none !important; }
  /* Hide the heavy desktop toolbars; keep zoom + print accessible. */
  .tb2-group:not(.tb2-keep-mobile) { display: none !important; }
  /* Banner at the top of canvas */
  .canvas-wrap::before {
    content: '📱 Forskoðun á síma  ·  Opnaðu á tölvu til að breyta';
    display: block;
    padding: 10px 14px;
    margin: 0 0 var(--m-3);
    background: var(--m-acc-tint);
    border: 1px solid var(--m-acc-tint2);
    border-radius: var(--m-r-md);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--m-acc);
    text-align: center;
  }
  /* Topbar — keep nav + user controls, hide chips that overflow */
  #savestate, #chip-sz, #chip-prt { display: none !important; }
  /* Modal close ergonomics on touch */
  .modal-x, .mcl { width: 40px !important; height: 40px !important; }
}
@media (max-width: 540px) {
  .topbar { padding: 0 var(--m-3) !important; }
  .nb { font-size: 0.78rem !important; padding: 8px 10px !important; }
  .logo-name { font-size: 1.1rem !important; }
  .logo-domain { display: none; }
}

/* === 31. RESPONSIVE ================================= */

@media (max-width: 760px) {
  .auth-box {
    padding: 32px 22px 48px !important;
    border-radius: var(--m-r-lg) !important;
    margin: 8px;
  }
  .auth-logo-text { font-size: 2.2rem !important; }
  .auth-tagline { font-size: 0.86rem !important; }
  .nb { font-size: 0.8rem !important; padding: 8px 10px !important; }
  .ph { padding: var(--m-3) var(--m-4) !important; }
  .modal { border-radius: var(--m-r-md) !important; }
}

@media (max-width: 540px) {
  .auth-box { padding: 28px 20px 44px !important; margin: 6px; }
  .auth-logo { margin-bottom: 24px !important; }
  .modal-h { padding: var(--m-4) !important; }
  .dash-kpi { font-size: 1.8rem !important; }
}

/* === 32. PRINT ====================================== */

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

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

/* === 34. DARK MODE ================================= */

html.dark {
  --m-bg:        #0B100D;
  --m-bg-2:      #131915;
  --m-paper:     #181F1B;
  --m-paper-2:   #1F2722;
  --m-tint-1:    #232E27;
  --m-tint-2:    #2F3D33;
  --m-line-soft: rgba(241, 236, 223, 0.05);
  --m-line:      rgba(241, 236, 223, 0.10);
  --m-line-firm: rgba(241, 236, 223, 0.18);
  --m-line-bold: rgba(241, 236, 223, 0.30);
  --m-acc:       #4ADE80;
  --m-acc-mid:   #22C55E;
  --m-acc-light: #16A34A;
  --m-acc-glow:  #86EFAC;
  --m-acc-deep:  #14532D;
  --m-acc-tint:  rgba(74, 222, 128, 0.10);
  --m-acc-tint2: rgba(74, 222, 128, 0.18);
  --m-acc-ring:  rgba(74, 222, 128, 0.36);
  --m-acc-grad:  linear-gradient(135deg, #22C55E 0%, #4ADE80 60%, #86EFAC 100%);
  --m-gold:      #E0AE6C;
  --m-gold-tint: rgba(224, 174, 108, 0.14);
  --m-ink:       #F1ECDF;
  --m-ink-2:     #C8CEC2;
  --m-ink-3:     #8A9890;
  --m-ink-4:     #5A685F;
  --m-on-acc:    #0B100D;
  --m-sh-1: 0 1px 2px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.3);
  --m-sh-2: 0 2px 4px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
  --m-sh-3: 0 4px 8px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.5);
  --m-sh-4: 0 8px 16px rgba(0,0,0,0.5), 0 24px 48px rgba(0,0,0,0.6);
  --m-sh-5: 0 16px 32px rgba(0,0,0,0.6), 0 40px 80px rgba(0,0,0,0.7);
}

html.dark body {
  background-image:
    radial-gradient(ellipse 75% 55% at 12% -8%, rgba(74, 222, 128, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% 105%, rgba(134, 239, 172, 0.06) 0%, transparent 55%) !important;
}

/* === 35. SIDEBAR ACCORDION ======================== */
/* The existing CSS in 01-import.css already had .fsec.open targets but
   the collapse mechanism was never wired up: .fsec-inner was always
   visible. v4 finishes the job — collapsed by default, opens with a
   spring slide. JS in 01-init.js sets the initial-open sections and
   handles click toggling. */
.fsec {
  border-bottom: 1px solid var(--m-line-soft) !important;
  background: transparent !important;
  transition: background var(--m-dur-fast) var(--m-ease) !important;
}
.fsec:hover {
  background: rgba(27, 67, 50, 0.025) !important;
}
.fsec-inner {
  display: none !important;
  padding: 0 var(--m-4) var(--m-4) !important;
  animation: m-fsec-slide var(--m-dur-3) var(--m-ease);
}
.fsec.open > .fsec-inner {
  display: flex !important;
  flex-direction: column;
  gap: var(--m-3);
}
@keyframes m-fsec-slide {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 1200px; }
}

.fsec-title {
  padding: 13px var(--m-4) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--m-ink-2) !important;
  cursor: pointer;
  user-select: none;
  transition: color var(--m-dur-fast) var(--m-ease) !important;
}
.fsec-title:hover { color: var(--m-acc) !important; }
.fsec.open > .fsec-title { color: var(--m-acc) !important; }

.fsec-title-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--m-r-sm) !important;
  background: var(--m-bg-2) !important;
  font-size: 14px !important;
  transition: transform var(--m-dur-fast) var(--m-ease-spring), background var(--m-dur-fast) var(--m-ease) !important;
}
.fsec.open > .fsec-title .fsec-title-icon {
  background: var(--m-acc-tint2) !important;
}
.fsec:hover > .fsec-title .fsec-title-icon {
  transform: scale(1.08);
}

.fsec-arrow {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--m-ink-3);
  transition: transform var(--m-dur) var(--m-ease), color var(--m-dur-fast) var(--m-ease);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fsec.open > .fsec-title .fsec-arrow {
  transform: rotate(90deg);
  color: var(--m-acc);
}

/* === 36. UNIFIED CLOSE BUTTON ===================== */
/* All modal close buttons (×) — same size, same hover, same look. Replaces
   the 5 different visual treatments scattered through the original code. */
.modal-x,
.mcl,
[onclick^="closeMod"],
button[aria-label="Loka"]:not(.btn-acc):not(.lp-btn-primary) {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: var(--m-r-sm) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--m-ink-3) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-family: var(--m-font) !important;
  transition: all var(--m-dur-fast) var(--m-ease) !important;
  flex-shrink: 0;
}
.modal-x:hover,
.mcl:hover,
button[aria-label="Loka"]:not(.btn-acc):not(.lp-btn-primary):hover {
  background: var(--m-bg-2) !important;
  border-color: var(--m-line) !important;
  color: var(--m-ink) !important;
  transform: rotate(90deg);
}

/* === 36b. BRAND MODAL TABS ======================== */
.brand-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--m-bg-2);
  border-radius: var(--m-r-md);
  margin: var(--m-3) var(--m-6);
}
.brand-tab {
  flex: 1;
  padding: 9px 12px;
  border: none;
  border-radius: var(--m-r-sm);
  background: transparent;
  font-family: var(--m-font);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--m-ink-3);
  cursor: pointer;
  transition: all var(--m-dur-fast) var(--m-ease);
}
.brand-tab:hover { color: var(--m-ink); }
.brand-tab.active {
  background: var(--m-paper);
  color: var(--m-acc);
  box-shadow: var(--m-sh-1), 0 0 0 1px var(--m-line);
}

/* === 36c. ADMIN PANEL — restyled to match v4 ====== */
/* The admin panel uses 100+ inline styles (hardcoded font-family,
   border-radius, padding, colors). v4 needs high-specificity overrides
   to win against `style="..."` attributes. */

#mod-admin .modal-title > div > div:first-child {
  width: 36px !important;
  height: 36px !important;
  background: var(--m-acc-grad) !important;
  border-radius: var(--m-r-md) !important;
  color: var(--m-on-acc) !important;
  box-shadow: var(--m-sh-acc);
}

#mod-admin button[id^="adm-t-"] {
  background: transparent !important;
  border: none !important;
  border-radius: var(--m-r-sm) !important;
  font-family: var(--m-font) !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  letter-spacing: -0.005em !important;
  color: var(--m-ink-3) !important;
  padding: 9px 12px !important;
  cursor: pointer;
  transition: all var(--m-dur-fast) var(--m-ease) !important;
}
#mod-admin button[id^="adm-t-"]:hover {
  color: var(--m-ink) !important;
}
#mod-admin button[id^="adm-t-"][style*="var(--s3)"],
#mod-admin button[id^="adm-t-"][style*="background:var(--s3)"] {
  /* Active state — JS sets bg to var(--s3); we paint over it. */
  background: var(--m-paper) !important;
  color: var(--m-acc) !important;
  font-weight: 600 !important;
  box-shadow: var(--m-sh-1), 0 0 0 1px var(--m-line) !important;
}

#mod-admin > .modal > div[style*="display:grid"][style*="repeat(4"] {
  /* Stats row */
  gap: var(--m-3) !important;
}

/* Lift any hardcoded radius / borders inside the admin panel */
#mod-admin div[style*="border-radius:12px"],
#mod-admin div[style*="border-radius: 12px"] {
  border-radius: var(--m-r-md) !important;
  border-color: var(--m-line) !important;
}

#mod-admin .frow {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--m-3) !important;
}

/* === 37. AUTO-SAVE INDICATOR ====================== */
.savestate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--m-font);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--m-ink-3);
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: var(--m-r-pill);
  background: var(--m-bg-2);
  border: 1px solid var(--m-line-soft);
  transition: all var(--m-dur) var(--m-ease);
  white-space: nowrap;
}
.savestate.saving {
  color: var(--m-acc);
  background: var(--m-acc-tint);
}
.savestate.saved {
  color: var(--m-success);
  background: var(--m-acc-tint);
  border-color: var(--m-acc-tint2);
}
.savestate.failed {
  color: var(--m-danger);
  background: var(--m-danger-tint);
  border-color: rgba(192, 59, 42, 0.20);
}
.savestate-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}
.savestate.saving .savestate-dot {
  animation: m-pulse-soft 1.2s var(--m-ease) infinite;
}

/* === END v4 ====================================== */