* {
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      box-sizing: border-box;
    }
    
    body {
      background-color: #0b1120;
      background-image: 
        radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 50%, #0b1120 100%);
      background-attachment: fixed;
      color: #f8fafc;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      overflow-x: hidden;
      min-height: 100dvh;
    }

    .safe-top { padding-top: env(safe-area-inset-top, 0.75rem); }
    .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 1rem); }

    .zen-panel {
      background: rgba(30, 41, 59, 0.6);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    }

    .zen-card-coral {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      box-shadow: 0 12px 28px -6px rgba(234, 88, 12, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
    }

    .zen-button-coral {
      background: linear-gradient(180deg, #fb923c 0%, #f97316 45%, #ea580c 100%);
      box-shadow: 0 10px 25px -4px rgba(249, 115, 22, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
      border: 1px solid rgba(253, 186, 116, 0.3);
    }
    .zen-button-coral:active { transform: scale(0.97); }

    .synonym-tag {
      cursor: pointer;
      border-bottom: 1.5px dotted #f97316;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding-bottom: 1px;
    }
    .synonym-tag:hover, .synonym-tag:active {
      color: #fdba74;
      background: rgba(249, 115, 22, 0.12);
      border-radius: 4px;
      padding-left: 3px;
      padding-right: 3px;
    }

    @keyframes popIn {
      0% { opacity: 0; transform: scale(0.93) translateY(6px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .animate-pop { animation: popIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

    @keyframes slideUp {
      0% { transform: translateY(100%); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }
    .animate-slide-up { animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

    /* GUARDIÁN SABIO 2.5D ANIMATIONS */
    @keyframes guardianFloat {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-4px) rotate(0.8deg); }
    }
    .guardian-floating {
      animation: guardianFloat 3.6s ease-in-out infinite;
      transform-origin: center bottom;
    }

    @keyframes guardianBlink {
      0%, 90%, 100% { transform: scaleY(1); }
      95% { transform: scaleY(0.08); }
    }
    .guardian-eyes {
      animation: guardianBlink 4.2s infinite;
      transform-origin: center;
    }

    @keyframes guardianNod {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(4deg) translateY(2px); }
      50% { transform: rotate(-2deg) translateY(-1px); }
      75% { transform: rotate(2deg) translateY(1px); }
    }
    .guardian-nodding {
      animation: guardianNod 0.75s ease-in-out 2;
      transform-origin: center bottom;
    }

    @keyframes scrollGlow {
      0%, 100% { filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.4)); }
      50% { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85)); }
    }
    .scroll-glow {
      animation: scrollGlow 2.4s ease-in-out infinite;
    }

    @keyframes dialogPop {
      0% { opacity: 0; transform: scale(0.9) translateY(8px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .animate-dialog-pop {
      animation: dialogPop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* ==========================================================
       BALANZA DE CUENTAS T - FÍSICA ELÁSTICA & SPRING
       ========================================================== */
    .balance-beam {
      transform-origin: 50% 50%;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .balance-pan {
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease;
    }

    .chip-draggable {
      cursor: grab;
      touch-action: none;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .chip-draggable:active {
      cursor: grabbing;
      transform: scale(1.05);
    }
    .drop-zone-active {
      background-color: rgba(6, 182, 212, 0.25) !important;
      border-color: rgba(6, 182, 212, 0.9) !important;
      transform: scale(1.03);
    }