/* ==========================================
       ARCHITECTURAL MONOCHROME + MICRO-ACCENT PALETTES
       ========================================== */
    :root {
      /* Default: Warm Architectural Stone & Brushed Bronze */
      --bg-primary: #F3F2EE;
      --bg-surface: #FFFFFF;
      --bg-subtle: #EAE8E3;
      --bg-hover: #E2DFD7;
      --text-primary: #18181B;
      --text-secondary: #52525B;
      --text-muted: #86847E;
      --border-hairline: #DCD9D0;
      --border-strong: #27272A;
      --accent-primary: #1F1F22;
      --accent-secondary: #3A3A40;
      --accent-tertiary: #52525B;
      --accent-contrast: #FFFFFF;
      --accent-micro: #8C7355; /* Brushed Bronze */
      --accent-micro-soft: #F5F0E6;
      --pill-booked-bg: #1F1F22;
      --pill-booked-text: #FFFFFF;
      --pill-tentative-bg: #E6E4DD;
      --pill-tentative-text: #686660;
    }

    body.theme-titanium {
      /* Cool Titanium & Architectural Cobalt Steel */
      --bg-primary: #ECEFF3;
      --bg-surface: #F9FAFB;
      --bg-subtle: #E1E6EC;
      --bg-hover: #D5DCE4;
      --text-primary: #14171A;
      --text-secondary: #4B5563;
      --text-muted: #7C8794;
      --border-hairline: #CFD6DF;
      --border-strong: #1E293B;
      --accent-primary: #1E293B;
      --accent-secondary: #334155;
      --accent-tertiary: #475569;
      --accent-contrast: #FFFFFF;
      --accent-micro: #3B5B7C; /* Architectural Steel */
      --accent-micro-soft: #EBF1F6;
      --pill-booked-bg: #1E293B;
      --pill-booked-text: #FFFFFF;
      --pill-tentative-bg: #DCE2E9;
      --pill-tentative-text: #526071;
    }

    body.theme-dark {
      /* Matte Obsidian & Warm Champagne */
      --bg-primary: #0F1012;
      --bg-surface: #17181C;
      --bg-subtle: #202227;
      --bg-hover: #282B31;
      --text-primary: #F4F4F6;
      --text-secondary: #A1A1AA;
      --text-muted: #6E717A;
      --border-hairline: #2B2D35;
      --border-strong: #E4E4E7;
      --accent-primary: #F4F4F6;
      --accent-contrast: #111215;
      --accent-micro: #B89B72; /* Champagne Bronze */
      --accent-micro-soft: #26231F;
      --pill-booked-bg: #F4F4F6;
      --pill-booked-text: #111215;
      --pill-tentative-bg: #272930;
      --pill-tentative-text: #9CA3AF;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .font-brand {
      font-family: 'Montserrat', sans-serif;
    }

    .surface-card {
      background-color: var(--bg-surface);
      border: 1px solid var(--border-hairline);
    }

    .col-priority-box {
      background-color: var(--bg-surface);
      border: 1.5px solid var(--border-strong);
      border-radius: 4px;
    }

    .subtle-box {
      background-color: var(--bg-subtle);
    }

    .hairline-border {
      border-color: var(--border-hairline);
    }

    .strong-border {
      border-color: var(--border-strong);
    }

    .single-line-row {
      border-bottom: 1px solid var(--border-hairline);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background-color 0.12s ease;
    }

    .single-line-row:hover {
      background-color: var(--bg-hover);
    }

    .btn-primary {
      background-color: var(--accent-primary);
      color: var(--accent-contrast);
    }

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

    .accent-micro-border {
      border-left: 3px solid var(--accent-micro);
    }

    .pill-booked {
      background-color: var(--pill-booked-bg);
      color: var(--pill-booked-text);
      white-space: nowrap;
    }

    .pill-tentative {
      background-color: var(--pill-tentative-bg);
      color: var(--pill-tentative-text);
      white-space: nowrap;
    }

    /* Custom thin scrollbars for high-density columns */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    ::-webkit-scrollbar-thumb {
      background: var(--border-hairline);
      border-radius: 3px;
    }


    .drag-handle {
      cursor: grab;
      user-select: none;
      opacity: 0.45;
      transition: opacity 0.15s ease;
    }
    .drag-handle:hover {
      opacity: 1;
    }
    .dragging-el {
      opacity: 0.4;
      border: 1.5px dashed var(--accent-micro) !important;
    }
    .drop-target-active {
      outline: 2px dashed var(--accent-micro);
      outline-offset: 2px;
    }
    .day-card-box {
      border: 1px solid var(--border-hairline);
      border-left: 3.5px solid var(--border-strong);
      border-radius: 5px;
      background-color: var(--bg-surface);
      margin-bottom: 6px;
      overflow: hidden;
    }
    .day-card-box.day-open {
      border-left-color: #10B981;
      background-color: var(--bg-subtle);
    }
    .day-card-box.day-bday {
      border-left-color: var(--accent-micro);
      background-color: var(--accent-micro-soft);
    }
    .mobile-phone-frame {
      max-width: 420px;
      margin: 0 auto;
      border: 8px solid #1F1F22;
      border-radius: 32px;
      box-shadow: 0 20px 45px rgba(0,0,0,0.18);
      overflow: hidden;
      background-color: var(--bg-primary);
    }


    /* 8pt High-Density Main Command Typography */
    #tab-dashboard {
      font-size: 10.5px;
      line-height: 1.3;
    }
    #tab-dashboard .single-line-row {
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      font-size: 10.5px;
    }
    #tab-dashboard .col-priority-box,
    #tab-dashboard .surface-card {
      margin-bottom: 6px;
    }
    .missing-field-badge {
      background-color: var(--accent-micro-soft);
      color: var(--accent-micro);
      border: 1px dashed var(--accent-micro);
      padding: 1px 6px;
      border-radius: 3px;
      font-size: 9.5px;
      font-weight: 500;
      opacity: 0.85;
    }

    @media print {
      .no-print {
        display: none !important;
      }
      body {
        background: #FFFFFF !important;
        color: #000000 !important;
      }
      .surface-card {
        border-color: #000000 !important;
      }
    }
  
    /* ==========================================
       MODERN ARCHITECTURAL HEADER & BUTTON POP
       ========================================== */
    .modern-header-shell {
      background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-primary) 100%);
      border-bottom: 1px solid var(--border-strong);
      box-shadow: 0 4px 18px -6px rgba(0, 0, 0, 0.08);
    }
    body.theme-dark .modern-header-shell {
      background: linear-gradient(180deg, #1E2024 0%, #141619 100%);
      box-shadow: 0 6px 22px -6px rgba(0, 0, 0, 0.45);
    }
    .modern-pill-btn {
      border: 1px solid var(--border-strong);
      background: var(--bg-surface);
      color: var(--text-primary);
      font-weight: 600;
      letter-spacing: 0.02em;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
      transition: all 0.15s ease;
    }
    .modern-pill-btn:hover {
      border-color: var(--accent-micro);
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.10);
    }
    .modern-accent-btn {
      background: var(--accent-primary);
      color: var(--accent-contrast);
      border: 1px solid var(--border-strong);
      font-weight: 600;
      box-shadow: 0 2px 5px rgba(0,0,0,0.14);
      transition: all 0.15s ease;
    }
    .modern-accent-btn:hover {
      background: var(--accent-micro);
      border-color: var(--accent-micro);
      color: #FFFFFF;
      transform: translateY(-1px);
    }
    .weather-app-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.05);
    }
    .weather-day-pill {
      background: var(--bg-subtle);
      border: 1px solid var(--border-hairline);
      border-radius: 6px;
      padding: 3px 8px;
      min-width: 58px;
      text-align: center;
      transition: border-color 0.15s ease;
    }
    .weather-day-pill.today-pill {
      border-color: var(--accent-micro);
      background: var(--accent-micro-soft);
    }
    .quote-showcase-box {
      background: var(--bg-surface);
      border: 1px solid var(--border-strong);
      border-left: 3px solid var(--accent-micro);
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .surface-card, .col-priority-box {
      border: 1px solid var(--border-hairline) !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    }
    .col-priority-box {
      border-top: 2px solid var(--border-strong) !important;
    }
    .countdown-tile-live {
      background: var(--bg-surface);
      border: 1px solid var(--border-strong);
      border-bottom: 2px solid var(--accent-micro);
      border-radius: 6px;
      padding: 5px 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

  
    /* ==========================================
       SOFT UI 2.0 / FROSTED GLASS + TITANIUM-SLATE DEFAULT + MULTI-STOP GRADIENTS + LIVE SEASONAL/HOLIDAY BACKDROPS
       ========================================== */
    :root, body.theme-titanium, body.theme-stone {
      /* Scheme 1 (MAIN DEFAULT): Executive Greyscale — High-Contrast Deep Charcoal, Gunmetal Graphite & Crisp Platinum Glass (ZERO Blue) */
      --bg-primary: #D4D6DA;
      --bg-surface: rgba(255, 255, 255, 0.78);
      --bg-subtle: rgba(228, 230, 234, 0.82);
      --bg-hover: rgba(212, 215, 220, 0.90);
      --text-primary: #111315;
      --text-secondary: #2A2D32;
      --text-muted: #5A5F66;
      --border-hairline: rgba(30, 33, 38, 0.18);
      --border-strong: rgba(20, 22, 25, 0.42);
      --accent-primary: #121417;
      --accent-secondary: #2B2F36;
      --accent-tertiary: #484E57;
      --accent-contrast: #FFFFFF;
      --accent-micro: #1E2126;
      --accent-micro-soft: rgba(24, 26, 30, 0.14);
      --header-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(240, 242, 245, 0.95) 50%, rgba(228, 231, 236, 0.96) 100%);
      --card-grad: linear-gradient(155deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 247, 249, 0.95) 52%, rgba(235, 237, 241, 0.94) 100%);
      --pill-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(242, 244, 247, 0.96) 100%);
      --col-head-grad: linear-gradient(135deg, rgba(18, 20, 23, 0.11) 0%, rgba(43, 47, 54, 0.17) 55%, rgba(72, 78, 87, 0.08) 100%);
      --card-shadow: 0 12px 30px -6px rgba(15, 17, 20, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.96);
      --pill-shadow: 0 2px 6px -1px rgba(15, 17, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      --backdrop-grad: linear-gradient(135deg, #B8BCC2 0%, #E2E4E8 36%, #C8CCD2 70%, #AEB3BA 100%);
    }

    body.theme-pearl {
      /* Scheme 2: Pearl Alabaster & Cobalt-Indigo Gradient */
      --bg-primary: #E6ECF8;
      --bg-surface: rgba(255, 255, 255, 0.64);
      --bg-subtle: rgba(226, 234, 248, 0.72);
      --bg-hover: rgba(212, 223, 244, 0.82);
      --text-primary: #0F172A;
      --text-secondary: #334155;
      --text-muted: #5B6B82;
      --border-hairline: rgba(99, 102, 241, 0.22);
      --border-strong: rgba(59, 91, 255, 0.42);
      --accent-primary: #2563EB;
      --accent-secondary: #4F46E5;
      --accent-tertiary: #7C3AED;
      --accent-contrast: #FFFFFF;
      --accent-micro: #3B5BFF;
      --accent-micro-soft: rgba(59, 91, 255, 0.14);
      --header-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(238, 243, 255, 0.95) 50%, rgba(228, 236, 253, 0.96) 100%);
      --card-grad: linear-gradient(155deg, rgba(255, 255, 255, 0.97) 0%, rgba(242, 246, 255, 0.95) 52%, rgba(231, 238, 252, 0.94) 100%);
      --pill-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 245, 255, 0.96) 100%);
      --col-head-grad: linear-gradient(135deg, rgba(37, 99, 235, 0.10) 0%, rgba(79, 70, 229, 0.16) 55%, rgba(124, 58, 237, 0.08) 100%);
      --card-shadow: 0 10px 28px -6px rgba(30, 41, 59, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.94);
      --pill-shadow: 0 2px 6px -1px rgba(30, 41, 59, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.88);
      --backdrop-grad: linear-gradient(135deg, #D5E0F5 0%, #EEF3FC 42%, #DCE6F9 76%, #C8D7F4 100%);
    }

    body.theme-dark {
      /* Scheme 3: Smoked Charcoal & Brushed Platinum Frosted Glass (Neutral Dark Glass — ZERO Blue) */
      --bg-primary: #22252A;
      --bg-surface: rgba(38, 42, 48, 0.96);
      --bg-subtle: rgba(48, 53, 60, 0.95);
      --bg-hover: rgba(72, 78, 87, 0.70);
      --text-primary: #F9FAFB;
      --text-secondary: #E5E7EB;
      --text-muted: #9CA3AF;
      --border-hairline: rgba(229, 231, 235, 0.22);
      --border-strong: rgba(209, 213, 219, 0.45);
      --accent-primary: #1F2227;
      --accent-secondary: #3D434C;
      --accent-tertiary: #636B78;
      --accent-contrast: #FFFFFF;
      --accent-micro: #D1D5DB;
      --accent-micro-soft: rgba(209, 213, 219, 0.20);
      --header-grad: linear-gradient(135deg, rgba(46, 50, 57, 0.97) 0%, rgba(33, 36, 41, 0.96) 50%, rgba(41, 45, 52, 0.97) 100%);
      --card-grad: linear-gradient(155deg, rgba(54, 59, 67, 0.96) 0%, rgba(38, 42, 48, 0.95) 52%, rgba(30, 33, 38, 0.95) 100%);
      --pill-grad: linear-gradient(135deg, rgba(60, 65, 74, 0.96) 0%, rgba(42, 46, 53, 0.95) 100%);
      --col-head-grad: linear-gradient(135deg, rgba(156, 163, 175, 0.24) 0%, rgba(107, 114, 128, 0.14) 60%, rgba(255, 255, 255, 0.05) 100%);
      --card-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.24);
      --pill-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
      --backdrop-grad: linear-gradient(135deg, #1B1D21 0%, #2E3238 45%, #23262B 75%, #16181C 100%);
    }

    body.theme-emerald {
      /* Scheme 4: Smoked Slate & Emerald-Teal Glass (Translucent Frosted Glass) */
      --bg-primary: #1B2D30;
      --bg-surface: rgba(29, 51, 56, 0.96);
      --bg-subtle: rgba(36, 63, 68, 0.95);
      --bg-hover: rgba(56, 92, 99, 0.68);
      --text-primary: #F4FBF9;
      --text-secondary: #D5ECE8;
      --text-muted: #9DC2BC;
      --border-hairline: rgba(167, 243, 208, 0.22);
      --border-strong: rgba(20, 184, 166, 0.50);
      --accent-primary: #047857;
      --accent-secondary: #0D9488;
      --accent-tertiary: #2DD4BF;
      --accent-contrast: #FFFFFF;
      --accent-micro: #5EEAD4;
      --accent-micro-soft: rgba(20, 184, 166, 0.22);
      --header-grad: linear-gradient(135deg, rgba(36, 64, 69, 0.97) 0%, rgba(25, 47, 52, 0.96) 50%, rgba(32, 57, 63, 0.97) 100%);
      --card-grad: linear-gradient(155deg, rgba(42, 73, 79, 0.96) 0%, rgba(29, 53, 58, 0.95) 52%, rgba(23, 43, 48, 0.95) 100%);
      --pill-grad: linear-gradient(135deg, rgba(46, 79, 85, 0.96) 0%, rgba(32, 57, 63, 0.95) 100%);
      --col-head-grad: linear-gradient(135deg, rgba(13, 148, 136, 0.28) 0%, rgba(45, 212, 191, 0.16) 60%, rgba(255, 255, 255, 0.05) 100%);
      --card-shadow: 0 12px 32px -6px rgba(8, 18, 20, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
      --pill-shadow: 0 2px 6px rgba(8, 18, 20, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
      --backdrop-grad: linear-gradient(135deg, #162629 0%, #244045 45%, #1C3338 75%, #132124 100%);
    }

    body.theme-amethyst, body.theme-crimson {
      /* Scheme 5: Silver Mist & Deep Amethyst Gradient (Replaces Crimson) */
      --bg-primary: #E4E1F0;
      --bg-surface: rgba(250, 249, 255, 0.62);
      --bg-subtle: rgba(232, 228, 246, 0.72);
      --bg-hover: rgba(218, 212, 240, 0.82);
      --text-primary: #1A162B;
      --text-secondary: #373052;
      --text-muted: #635B82;
      --border-hairline: rgba(109, 40, 217, 0.20);
      --border-strong: rgba(109, 40, 217, 0.40);
      --accent-primary: #3B235A;
      --accent-secondary: #5B348B;
      --accent-tertiary: #7E52B8;
      --accent-contrast: #FFFFFF;
      --accent-micro: #5B348B;
      --accent-micro-soft: rgba(91, 52, 139, 0.14);
      --header-grad: linear-gradient(135deg, rgba(252, 250, 255, 0.97) 0%, rgba(239, 235, 251, 0.95) 50%, rgba(229, 224, 247, 0.96) 100%);
      --card-grad: linear-gradient(155deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 241, 253, 0.95) 52%, rgba(233, 228, 249, 0.94) 100%);
      --pill-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 238, 253, 0.96) 100%);
      --col-head-grad: linear-gradient(135deg, rgba(59, 35, 90, 0.12) 0%, rgba(91, 52, 139, 0.18) 55%, rgba(126, 82, 184, 0.10) 100%);
      --card-shadow: 0 10px 28px -6px rgba(26, 22, 43, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      --pill-shadow: 0 2px 6px -1px rgba(26, 22, 43, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
      --backdrop-grad: linear-gradient(135deg, #D5D0E8 0%, #EFEBF9 40%, #DDD7F0 74%, #C7BFE2 100%);
    }

    body {
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
      background: var(--backdrop-grad) !important;
      /* background-attachment: scroll for zero-jank compositing */
      position: relative;
    }

    .font-brand {
      font-family: 'Outfit', 'Montserrat', sans-serif !important;
    }

    /* ==========================================
       HIGH-VISIBILITY ARCHITECTURAL + SEASONAL/HOLIDAY BACKDROPS (ZERO POLKA DOTS)
       ========================================== */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.15;
      background-image:
        var(--mager-logo-url, none),
        var(--mager-logo-url, none),
        linear-gradient(125deg, rgba(24, 26, 30, 0.18) 0%, rgba(255, 255, 255, 0.28) 48%, rgba(24, 26, 30, 0.20) 100%);
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-position: center 54%, right -50px bottom -50px, center;
      background-size: 460px 460px, 340px 340px, 100% 100%;
      transition: all 0.35s ease;
    }

    body.backdrop-autumn::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 18% 12%, rgba(217, 119, 6, 0.26) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 82%, rgba(180, 83, 9, 0.24) 0%, transparent 55%),
        linear-gradient(135deg, rgba(154, 52, 18, 0.18) 0%, rgba(217, 119, 6, 0.10) 48%, rgba(120, 53, 15, 0.20) 100%);
      background-size: 100% 100%;
      background-position: center;
    }

    body.backdrop-winter::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 20% 15%, rgba(56, 189, 248, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 80%, rgba(15, 118, 110, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, rgba(30, 58, 138, 0.20) 0%, rgba(186, 230, 253, 0.18) 50%, rgba(15, 23, 42, 0.22) 100%);
      background-size: 100% 100%;
      background-position: center;
    }

    body.backdrop-veterans::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 15% 15%, rgba(30, 58, 138, 0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(153, 27, 27, 0.22) 0%, transparent 55%),
        repeating-linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0px, rgba(30, 58, 138, 0.06) 28px, transparent 28px, transparent 56px),
        linear-gradient(135deg, rgba(23, 37, 84, 0.22) 0%, rgba(248, 250, 252, 0.14) 50%, rgba(127, 29, 29, 0.18) 100%);
      background-size: 100% 100%;
      background-position: center;
    }

    body.backdrop-halloween::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 20% 18%, rgba(234, 88, 12, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 82%, rgba(88, 28, 135, 0.28) 0%, transparent 55%),
        linear-gradient(135deg, rgba(67, 20, 7, 0.22) 0%, rgba(107, 33, 168, 0.16) 50%, rgba(30, 27, 75, 0.24) 100%);
      background-size: 100% 100%;
      background-position: center;
    }

    body.backdrop-valentines::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 22% 18%, rgba(225, 29, 72, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(190, 24, 93, 0.20) 0%, transparent 55%),
        linear-gradient(135deg, rgba(244, 63, 94, 0.16) 0%, rgba(253, 164, 175, 0.14) 50%, rgba(136, 19, 55, 0.16) 100%);
      background-size: 100% 100%;
      background-position: center;
    }

    body.backdrop-easter::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 20% 20%, rgba(16, 185, 129, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 78%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, rgba(110, 231, 183, 0.18) 0%, rgba(196, 181, 253, 0.18) 50%, rgba(253, 230, 138, 0.18) 100%);
      background-size: 100% 100%;
      background-position: center;
    }

    body.backdrop-grid::before {
      opacity: 0.75;
      background-image:
        linear-gradient(135deg, var(--accent-micro-soft) 0%, transparent 50%, var(--accent-micro-soft) 100%),
        linear-gradient(to right, var(--border-hairline) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-hairline) 1px, transparent 1px);
      background-size: 100% 100%, 32px 32px, 32px 32px;
      background-position: center;
    }

    #magerLiveBackdropCanvas {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 0;
    }

    header, main, .modern-header-shell {
      position: relative;
      z-index: 1;
    }

    .modern-header-shell {
      background: var(--header-grad) !important;
      /* v13.7 Zero-Lag GPU Surface: Eliminated 159x per-card Gaussian blur passes */
      border-bottom: 1px solid var(--border-strong) !important;
    }

    /* Translucent Frosted Glass Cards with Multi-Stop Diagonal Gradients */
    .surface-card, .col-priority-box, .weather-app-card, .soft-glass-pill {
      background: var(--card-grad) !important;
      /* v13.7 Zero-Lag GPU Surface: Eliminated 159x per-card Gaussian blur passes */
      border: 1px solid var(--border-hairline) !important;
      border-radius: 12px !important;
      box-shadow: var(--card-shadow) !important;
    }

    /* Column Top Headers & Priority Boxes get Subtle Gradient Sheen */
    .col-priority-box {
      background: var(--col-head-grad), var(--card-grad) !important;
      border-top: 2.5px solid var(--accent-secondary) !important;
    }

    /* Multi-Stop Gradient Buttons & Badges */
    .accent-gradient-badge, .btn-primary, .modern-accent-btn {
      background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 52%, var(--accent-tertiary, var(--accent-secondary)) 100%) !important;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.22) !important;
      box-shadow: 0 4px 12px -2px var(--accent-micro-soft), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

    /* Tactile Soft UI 2.0 Pill Rows inside compact columns */
    .single-line-row {
      font-size: 10.5px !important;
      line-height: 1.3 !important;
      background: var(--pill-grad) !important;
      border: 1px solid var(--border-hairline) !important;
      border-radius: 8px !important;
      margin: 3px 5px !important;
      padding: 4.5px 8px !important;
      box-shadow: var(--pill-shadow);
      transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    }
    .single-line-row:hover {
      border-color: var(--accent-secondary) !important;
      transform: translateY(-0.5px);
    }

    /* Highlighted Today Card at Top of 7-Day Rolling Calendar */
    .day-today-highlight {
      border: 1.5px solid var(--accent-secondary) !important;
      box-shadow: 0 4px 14px -3px var(--accent-micro-soft), var(--card-shadow) !important;
      border-radius: 10px !important;
      overflow: hidden;
    }
    .day-today-header {
      background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 52%, var(--accent-tertiary, var(--accent-secondary)) 100%) !important;
      color: #FFFFFF !important;
    }

    /* ==========================================
       100% BRAND & PRINT LOCK FOR PROPOSALS, INVOICES, EVENT DATA SHEETS & PRINTOUTS
       ========================================== */
    @media print {
      body, html {
        background: #FFFFFF !important;
        color: #000000 !important;
      }
      body::before, #magerLiveBackdropCanvas, .no-print {
        display: none !important;
      }
      .surface-card, .col-priority-box, #edsPrintSheet, .brand-print-locked {
        background: #FFFFFF !important;
        color: #000000 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border-color: #111827 !important;
      }
    }
    .brand-print-locked {
      background: #FFFFFF !important;
      color: #111827 !important;
      font-family: 'Inter', -apple-system, sans-serif !important;
    }

  
    /* Soft UI 2.0 Gradient Column Headers & Tactile Category Cards */
    .col-header-pill {
      background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 55%, var(--accent-tertiary, var(--accent-secondary)) 100%) !important;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.24) !important;
      box-shadow: 0 6px 16px -4px rgba(15, 20, 28, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    }
    #fiveColGrid > div > .surface-card > div:first-child,
    #fiveColGrid > div > .col-priority-box > div:first-child {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 100%);
      font-family: 'Outfit', sans-serif !important;
      font-weight: 600 !important;
      letter-spacing: 0.02em !important;
      padding: 6px 10px !important;
    }
    body.theme-dark #fiveColGrid > div > .surface-card > div:first-child,
    body.theme-dark #fiveColGrid > div > .col-priority-box > div:first-child,
    body.theme-emerald #fiveColGrid > div > .surface-card > div:first-child,
    body.theme-emerald #fiveColGrid > div > .col-priority-box > div:first-child {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    }
    #tab-dashboard .divide-y > :not([hidden]) ~ :not([hidden]) {
      border-top-width: 0px !important;
    }

  
    body.backdrop-thanksgiving::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 20% 15%, rgba(217, 119, 6, 0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 82%, rgba(154, 52, 18, 0.28) 0%, transparent 55%),
        linear-gradient(135deg, rgba(180, 83, 9, 0.22) 0%, rgba(245, 158, 11, 0.14) 50%, rgba(120, 53, 15, 0.24) 100%);
      background-size: 100% 100%;
      background-position: center;
    }
    body.backdrop-christmas::before {
      opacity: 1;
      background-image:
        radial-gradient(ellipse at 18% 15%, rgba(22, 101, 52, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 82%, rgba(185, 28, 28, 0.24) 0%, transparent 55%),
        linear-gradient(135deg, rgba(20, 83, 45, 0.22) 0%, rgba(248, 250, 252, 0.14) 50%, rgba(153, 27, 27, 0.20) 100%);
      background-size: 100% 100%;
      background-position: center;
    }


    body.mager-locked > *:not(#magerSecurityGateOverlay):not(#magerLiveBackdropCanvas) {
      display: none !important;
    }
    #magerSecurityGateOverlay {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: linear-gradient(135deg, #141619 0%, #22262C 50%, #101215 100%);
      color: #F9FAFB;
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    }
html[data-mager-locked="true"] body > *:not(#magerSecurityGateOverlay):not(#magerLiveBackdropCanvas),
body.mager-locked > *:not(#magerSecurityGateOverlay):not(#magerLiveBackdropCanvas) {
  display: none !important;
}
html:not([data-mager-locked="true"]) body:not(.mager-locked) #magerSecurityGateOverlay {
  display: none !important;
}
html[data-mager-locked="true"] #magerSecurityGateOverlay,
body.mager-locked #magerSecurityGateOverlay {
  display: flex !important;
}

/* v14.3 Single-Line Category Headers & Compact Line Items */
#fiveColGrid > div > .col-priority-box > div:first-child,
#fiveColGrid > div > .surface-card > div:first-child {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 8px !important;
  min-height: 28px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
#fiveColGrid > div > .col-priority-box > div:first-child button[data-collapse],
#fiveColGrid > div > .surface-card > div:first-child button[data-collapse],
#fiveColGrid > div > .col-priority-box > div:first-child > span:not(.cat-drag-grip),
#fiveColGrid > div > .surface-card > div:first-child > span:not(.cat-drag-grip) {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
/* Hide secondary subtitle badges inside Main Command category headers so every header stays strictly 1 clean line */
#fiveColGrid > div > .col-priority-box > div:first-child > span.accent-micro-text,
#fiveColGrid > div > .surface-card > div:first-child > span.opacity-60 {
  display: none !important;
}
#fiveColGrid .single-line-row,
#fiveColGrid #engCalBody .group,
#fiveColGrid #opsEventsBody .single-line-row,
#fiveColGrid #callumTasksList .single-line-row {
  font-size: 10px !important;
  line-height: 1.28 !important;
}
#fiveColGrid .universal-cat-ctrl-bar select {
  display: none !important;
}


/* v14.6 Header Polish, Opaque Sticky Bar & Clean Category Header Alignment */
header.sticky.surface-card {
  background: #F4F5F7 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.14) !important;
}
body.theme-pearl header.sticky.surface-card {
  background: #F8FAFC !important;
}
body.theme-amethyst header.sticky.surface-card {
  background: #F5F3FF !important;
}
body.theme-dark header.sticky.surface-card,
body.theme-emerald header.sticky.surface-card {
  background: #181C22 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
#fiveColGrid > div > .col-priority-box > div:first-child,
#fiveColGrid > div > .surface-card > div:first-child {
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 5px 7px !important;
}
#fiveColGrid > div > .col-priority-box > div:first-child button[data-collapse],
#fiveColGrid > div > .surface-card > div:first-child button[data-collapse] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
#fiveColGrid .v146-right-hdr-group {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

@media (max-width: 640px) {
  header.sticky.surface-card > div > div:last-child {
    width: 100% !important;
    display: flex !important;
  }
  #quickCaptureInput {
    width: auto !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1620px) {
  #fiveColGrid > div > .col-priority-box > div:first-child,
  #fiveColGrid > div > .surface-card > div:first-child {
    padding: 4px 5px !important;
    gap: 2px !important;
  }
  #fiveColGrid > div > .col-priority-box > div:first-child button[data-collapse],
  #fiveColGrid > div > .surface-card > div:first-child button[data-collapse],
  #fiveColGrid > div > .col-priority-box > div:first-child > span:not(.cat-drag-grip),
  #fiveColGrid > div > .surface-card > div:first-child > span:not(.cat-drag-grip) {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
  }
}