:root {
      --bg-page: #f8fafc;
      --card-bg: #ffffff;
      --card-border: #e2e8f0;
      --card-border-hover: #cbd5e1;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --text-light: #94a3b8;
      
      /* Soft Pastel Accent Palette */
      --pastel-blue-bg: #eff6ff;
      --pastel-blue-border: #bfdbfe;
      --pastel-blue-text: #1d4ed8;

      --pastel-emerald-bg: #ecfdf5;
      --pastel-emerald-border: #a7f3d0;
      --pastel-emerald-text: #047857;

      --pastel-amber-bg: #fffbeb;
      --pastel-amber-border: #fde68a;
      --pastel-amber-text: #b45309;

      --pastel-purple-bg: #f5f3ff;
      --pastel-purple-border: #ddd6fe;
      --pastel-purple-text: #6d28d9;

      --pastel-rose-bg: #fff1f2;
      --pastel-rose-border: #fecdd3;
      --pastel-rose-text: #be123c;
    }

    body {
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      background: radial-gradient(circle at 10% 8%, rgba(56, 189, 248, 0.12), transparent 32%),
                  radial-gradient(circle at 90% 12%, rgba(99, 102, 241, 0.08), transparent 28%),
                  radial-gradient(circle at 50% 90%, rgba(16, 185, 129, 0.06), transparent 36%),
                  linear-gradient(180deg, #f0f7ff 0%, #f8fafc 350px, #f8fafc 100%);
      background-attachment: fixed;
      color: #0f172a;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .safe-bottom { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

    /* Puna Modal Standard Steady Sticky Header */
    .modal-card-scrollable {
      padding: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      background: #ffffff !important;
      color: #0f172a !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
    }
    .modal-header-sticky {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      position: sticky;
      top: 0;
      z-index: 20;
      flex-shrink: 0;
    }
    .modal-body-scrollable {
      padding: 18px 20px;
      overflow-y: auto;
      flex-grow: 1;
    }
  
    /* Standar Puna UI: Confirm Modal & Custom Toast System */
    @keyframes modalPopIn {
      0% { transform: scale(0.92); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .puna-dialog-card {
      animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .custom-toast {
      padding: 14px 20px;
      border-radius: 14px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      pointer-events: auto;
      animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      transition: all 0.25s ease;
      width: 100%;
      box-sizing: border-box;
      color: #FFFFFF;
    }
    .custom-toast.toast-success {
      background: linear-gradient(135deg, #10B981, #059669);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .custom-toast.toast-error {
      background: linear-gradient(135deg, #EF4444, #DC2626);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .custom-toast.toast-info {
      background: linear-gradient(135deg, #0284C7, #0369A1);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .custom-toast.toast-warning {
      background: linear-gradient(135deg, #F59E0B, #D97706);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }