:root {
        --blue: #1e3fa0;
        --blue-l: #2563eb;
        --blue-bg: #eef4ff;
        --blue-mid: rgba(37, 99, 235, 0.12);
        --g900: #0f172a;
        --g800: #1e293b;
        --g500: #64748b;
        --g400: #94a3b8;
        --g200: #e2e8f0;
        --g100: #f1f5f9;
        --g50: #f8fafc;
      }
      body {
        background-color: #f8fafc;
        color: #0f172a;
        font-family: "Plus Jakarta Sans", "Inter", sans-serif;
      }

      /* Page Layout Optimization */
      .paper-page {
        width: 210mm;
        min-height: 297mm;
        padding: 1.5cm;
        /* Restored to 1.5cm as requested */
        background: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        margin: 0 auto 2rem auto;
        position: relative;
        font-family: "Merriweather", serif;
        font-size: 12pt;
        /* Standard legal font */
        line-height: 1.5;
        /* Standard spacing */
      }

      .paper-page p {
        margin-bottom: 1rem;
        /* Consistent paragraph spacing */
      }

      .paper-page li {
        margin-bottom: 0.35rem;
        /* Tighter list items for 31 clauses */
      }

      .highlight-var {
        font-weight: bold;
        color: #1e293b;
        background-color: #e0f2fe;
        padding: 1px 4px;
        border-radius: 2px;
        border-bottom: 1px solid #7dd3fc;
        overflow-wrap: break-word;
        word-wrap: break-word;
        /* Legacy support */
        word-break: break-all;
        /* Force breaks for long underscores/URLs */
        white-space: pre-wrap;
        transition: all 0.2s ease-in-out;
      }

      .highlight-var.active-fill {
        background-color: #fef08a !important; /* yellow-200 */
        color: #0f172a !important;
        border-bottom: 2px solid #ca8a04 !important; /* yellow-600 */
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.6);
        padding: 2px 6px;
        border-radius: 4px;
      }

      .bg-dot-pattern {
        background-color: #0f172a;
        background-image: radial-gradient(#334155 1px, transparent 1px);
        background-size: 24px 24px;
      }

      /* Claymorphism Colorful Icons */
      .clay-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: white;
        transition: all 0.3s ease;
        position: relative;
        /* The "Clay" effect: Heavy soft shadows + Inner highlights */
        box-shadow:
          6px 6px 14px rgba(164, 180, 200, 0.4),
          -6px -6px 14px rgba(255, 255, 255, 0.9),
          inset 2px 2px 5px rgba(255, 255, 255, 0.4),
          inset -2px -2px 5px rgba(0, 0, 0, 0.1);
      }

      .clay-icon i {
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
      }

      /* Color Variants - Matching the reference image vibes */
      .clay-cyan {
        background-color: #06b6d4;
      }

      .clay-purple {
        background-color: #a855f7;
      }

      .clay-pink {
        background-color: #ec4899;
      }

      .clay-orange {
        background-color: #f97316;
      }

      .clay-green {
        background-color: #22c55e;
      }

      @media print {
        @page {
          size: A4 portrait;
          margin: 0;
        }

        body {
          background: white;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }

        .paper-page {
          box-shadow: none;
          margin: 0;
          width: 210mm;
          min-height: 297mm;
          page-break-after: always;
        }

        .print-break {
          page-break-before: always;
        }

        /* Fix for faint borders in print */
        .char-grid-box {
          border-width: 1px !important;
          border-color: #000 !important;
          border-style: solid !important;
          background-color: #fff !important;
        }

        .char-grid-container {
          border-width: 1px !important;
          border-color: #000 !important;
          border-style: solid !important;
          background-color: #fff !important;
        }

        .no-print,
        .fixed,
        .toast-container,
        .toast,
        [class*="toast"],
        #authToast,
        .print-hidden,
        .print\:hidden,
        .lg\:hidden {
          display: none !important;
        }

        /* Remove highlights in print except if user wants them (previous request asked to REMOVE yellow) */
        .highlight-var {
          background-color: transparent !important;
          border-bottom: none !important;
          color: #000 !important;
          font-weight: bold !important;
          padding: 0 !important;
        }
      }

      .clay-yellow {
        background-color: #eab308;
      }

      .clay-icon:active {
        transform: scale(0.95);
        box-shadow:
          2px 2px 6px rgba(164, 180, 200, 0.4),
          -2px -2px 6px rgba(255, 255, 255, 0.9),
          inset 4px 4px 8px rgba(0, 0, 0, 0.1),
          inset -4px -4px 8px rgba(255, 255, 255, 0.3);
      }

      /* Consistent Page Numbering Footer */
      .page-number-footer {
        position: absolute;
        bottom: 0.5cm;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 9pt;
        color: #6b7280;
        font-family: "Inter", sans-serif;
      }

      /* Print Specifics */
      @page {
        size: A4;
        margin: 0;
      }

      @media print {
        html,
        body {
          width: 210mm;
          height: auto !important;
          overflow: visible !important;
          background: white;
          margin: 0;
          padding: 0;
        }

        .no-print,
        .app-sidebar,
        .fixed,
        .toast-container,
        .toast,
        [class*="toast"],
        #authToast,
        .print-hidden,
        .print\:hidden,
        .lg\:hidden,
        [id*="Toast"],
        .auth-toast,
        #editorOverlay,
        #authModal,
        #esignOverlay,
        .checkout-modal,
        .btn,
        button,
        header,
        footer,
        nav {
          display: none !important;
        }

        /* Unset fixed layouts that block scrolling/printing */
        #root,
        .app-layout-container {
          display: block !important;
          height: auto !important;
          overflow: visible !important;
        }

        body .paper-page-container,
        #root .paper-page-container {
          display: block !important;
          background: none !important;
          padding: 0 !important;
          height: auto !important;
          overflow: visible !important;
        }

        body .paper-page-container > .paper-page:first-of-type {
          page-break-before: avoid !important;
          page-break-before: auto !important;
        }

        .paper-page {
          position: relative;
          text-align: justify;
          box-shadow: none;
          margin: 0;
          width: 210mm;
          min-height: 297mm;
          height: 297mm !important;
          /* Force exact height */
          overflow: hidden !important;
          /* Clip content to prevent spillover */
          page-break-inside: avoid;
          padding: 1.5cm;
          /* Match screen padding */
          print-color-adjust: exact;
          -webkit-print-color-adjust: exact;
          font-size: 12pt;
          line-height: 1.5;
        }

        .print-break {
          page-break-after: always !important;
        }

        /* Hide page digest footer borders in print if desired, or keep them */
        .highlight-var {
          background-color: transparent !important;
          border: none !important;
          padding: 0 !important;
          color: black !important;
        }

        /* Remove variable highlights in print */
        .bg-yellow-100,
        .bg-rose-50,
        .bg-blue-50,
        .bg-blue-50,
        .bg-cyan-50,
        .bg-emerald-50,
        .bg-orange-50 {
          background-color: transparent !important;
        }
      }

      /* ===== SOLO MODE: hide authority selector + doc grid, show only active form ===== */
      body.solo-mode .instadeed-authority-selector {
        display: none !important;
      }
      body.solo-mode .instadeed-doc-grid {
        display: none !important;
      }
      body.solo-mode .instadeed-solo-header {
        display: none !important;
      }

      /* Fix toolbar overlapping in document editor */
      .sticky-header,
      [class*="toolbar"],
      [class*="Toolbar"],
      [class*="completion"],
      [class*="Completion"] {
        z-index: 100 !important;
        position: relative !important;
      }
      .paper-page-container {
        padding-top: 0 !important;
      }